export const fadeInAnimation = {
   mounted() {
      /////////////////////////////////////// class 1 animation
      const fadeInElements = $('.anim-fadeIn')

      Object.keys(fadeInElements).forEach((item, index) => {
         if (index < fadeInElements.length) {
            this.$gsap.timeline({
               scrollTrigger: {
                  trigger: $(fadeInElements[item]),
                  start: 'top 90%'
               }
            })
               .from($(fadeInElements[item]), {y: 10, opacity: 0, duration: 0.7})
         }
      })
   }
}


export const stretchAnimation = {
   mounted() {
      /////////////////////////////////////// class 1 animation
      const stretchElements = $('.anim-stretch')

      Object.keys(stretchElements).forEach((item, index) => {
         if (index < stretchElements.length) {
            this.$gsap.timeline({
               scrollTrigger: {
                  trigger: $(stretchElements[item]),
                  start: 'top 80%'
               }
            })
               .from($(stretchElements[item]), {scaleY: 1.2, duration: 0.3})
         }
      })
   }
}


export const parallaxAnimation_hero = {
   mounted() {
      /////////////////////////////////////// parallax animation
      this.$gsap.timeline({
         scrollTrigger: {
            trigger: $('.anim-parallax-hero'),
            start: 'top 0%',
            scrub: true
         }
      })
         .to($('.anim-parallax-hero'), {y: '40%', duration: 1})
         .to($('.anim-parallax-hero-txt'), {y: '25%', duration: 1}, 0)
         .to($('.anim-parallax-hero-container'), {y: '15%', duration: 1}, 0)
   }
}


export const parallaxAnimation = {
   mounted() {
      /////////////////////////////////////// parallax animation
      const parallaxElements = $('.anim-parallax')

      Object.keys(parallaxElements).forEach((item, index) => {
         if (index < parallaxElements.length) {
            this.$gsap.timeline({
               scrollTrigger: {
                  trigger: $(parallaxElements[item]),
                  start: 'top 50%',
                  end: 'bottom 0%',
                  scrub: true
               }
            })
               .to($(parallaxElements[item]), {y: '30%', duration: 1})
         }
      })
   }
}