/**
 * 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,
    }
  })