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