Jump to content
Search Community

Etienne Moureton

Members
  • Posts

    1
  • Joined

  • Last visited

Etienne Moureton's Achievements

  1. Hi, I'm discovering GSAP and have been able to implement it easily into my Nuxt project. I have some animations working bases on scrub, but i have one that i want to just play one time on trigger. If i had scrub to the ScrollTrigger it works, else the timeline is not fired. const section = this.$refs.section const tl = gsap.timeline({ scrollTrigger: { pin: true, markers: true, trigger: section, start: 'top top-100px', end: '+=100%', scrub: 1, ease: Power4.easeOut, toggleActions: "play none play none", toggleClass: "active" } }) tl.addLabel("start") .to('.fullscreen__content', { ease:Power1.easeInOut, duration: 500, padding: 0 }, 0) .to('h2', { ease:Power1.easeInOut, duration: 500, autoAlpha: 1 }, 500) .fromTo('.lines__item:nth-child(odd)', { height: 0 }, { ease:Power4.easeInOut, height: '4rem', duration: 500 }, 1000) .fromTo('.lines__item:nth-child(even)', { height: 0 }, { ease:Power4.easeInOut, height: '6rem', duration: 500 }, 1000) .to('.lines__item:nth-child(odd)', { ease:Power4.easeInOut, rotate: '10deg', duration: 500 }, 1500) .to('.lines__item:nth-child(even)', { ease:Power4.easeInOut, rotate: '10deg', duration: 500 }, 1500) .to('h2', { ease:Power4.easeInOut, duration: 500, fontSize: '6rem' }, 2000) .addLabel("end"); What am i missing ? Thanks
×
×
  • Create New...