digital-theory/js/main.js

/**
 * gsap lib https://greensock.com/get-started-2#controllingYourAnimations
 */
let development_debug = true;
gsap.fromTo("#main_title", {
  opacity: 0,
  top: 200
}, {
  opacity: 1,
  top: 100,
  duration: 1.5,
  ease: "sine"
})

gsap.to("#hand", {
  top: 300,
  duration: 1,
  scrollTrigger: {
    trigger: '#cover',
    scrub: 1,
    markers: development_debug,
  }
});
gsap.to("#main_title", {
  top: 150,
  duration: 1,
  scrollTrigger: {
    trigger: '#main_title',
    scrub: 1,
    markers: development_debug,
  }
});

gsap.to("#phone-watches-1",
  {
    left: 500,
    top: (531 - 400),
    scale: 0.8,
    duration: 1.5,
    ease: "sine",
    scrollTrigger: {
      trigger: '#welcome',
      scrub: 1,
      markers: development_debug,
    }
  })
gsap.to("#phone-watches-2",
  {
    left: "50vw",
    top: 100,
    scale: 0.7,
    duration: 1.25,
    ease: "sine",
    scrollTrigger: {
      trigger: '#welcome',
      scrub: 1,
      markers: development_debug,
    }
  })
gsap.to("#phone-watches-3",
  {
    left: "50vw",
    top: 0,
    scale: 0.8,
    duration: 1.25,
    ease: "sine",
    scrollTrigger: {
      trigger: '#welcome',
      scrub: 2,
      markers: development_debug,
    }
  })
gsap.to("#phone-watches-4",
  {
    left: "50vw",
    top: -10,
    scale: 0.5,
    duration: 3,
    ease: "sine",
    scrollTrigger: {
      trigger: '#welcome',
      scrub: 2,
      markers: development_debug,
    }
  })

gsap.to("#phone-watches-4",
  {
    left: "50vw",
    top: -10,
    scale: 0.5,
    duration: 3,
    ease: "sine",
    scrollTrigger: {
      trigger: '#welcome',
      scrub: 2,
      markers: development_debug,
    }
  })

gsap.to("#content_first",
  {
    left: -20,
    top: -50,
    opacity: 1,
    duration: 3,
    ease: "easeInOut",
    scrollTrigger: {
      trigger: '#content',
      scrub: 2,
      markers: development_debug,
    }
  })

gsap.to("#content_second",
  {
    left: -20,
    top: -50,
    opacity: 1,
    duration: 2,
    ease: "spline",
    scrollTrigger: {
      trigger: '#content',
      scrub: 2,
      markers: development_debug,
    }
  })

// le background coloré grandit légèrement
gsap.to("#content_all_img",
  {
    scale: 1.5,
    ease: "easeInOut",
    scrollTrigger: {
      trigger: '#content',
      scrub: 2,
      markers: development_debug,
    }
  })


let rotateYCard = "180deg";
let offsetCard = "-100px";
// flip from right
gsap.fromTo("#content-2", {
    rotateY: rotateYCard,
    right: offsetCard,
  },
  {
    rotateY: 0,
    right: 0,
    duration: 0.2,
    ease: "easeInOut",
    scrollTrigger: {
      trigger: '#content-2 .flip-handle',
      scrub: 1,
      markers: development_debug,
    }
  })



function animateCard(id, side){

  let fromObject = {
    rotateY: rotateYCard,
  }
  fromObject[side] = offsetCard

  let toObject ={
    rotateY: 0,
    duration: 0.2,
    ease: "easeInOut",
    scrollTrigger: {
      trigger: '#content-'+id+' .flip-handle',
      scrub: 1,
      markers: development_debug,
    }
  }
  toObject[side] = 0

  gsap.fromTo("#content-"+id, fromObject,
    toObject)
}

animateCard(2, 'right')
animateCard(3, 'left')
animateCard(4, 'right')
animateCard(5, 'left')