ScrollTrigger working with scrub but not without

[Etienne Moureton]

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

[Cassie]

Hi there! It's very hard for us to help without a minimal demo.

 

Currently we have no context at all - this issue could be caused by some CSS, some markup, a third party library, your browser, an external script... all sorts of possible reasons.

Ideally start off without a framework, just some coloured boxes and the GSAP code to see if you can recreate the issue with as few dependancies as possible. If you can't recreate the issue by doing this then incrementally add code in, bit by bit until the issue occurs.

Most of the time people manage to solve their own issues using this process! If not, then at least we have a reduced test case and a better idea of how to help.
 

Thanks!

 

[GreenSock]

@Cassie is absolutely right about the need for a minimal demo. From a quick glance, I thought I'd mention a few things:

1. start: 'top top-100px' is not valid. I assume you meant start: 'top top-=100px'
2. toggleActions: "play none play none" looks odd to me. There's no point in having play on the onEnterBack. It plays when it enters, so it'll just keep playing anyway. I'm concerned that you may not understand how toggleActions work. 
3. Some of your durations are SUPER long. And you're placing them into the timeline at CRAZY far positions, like 2000 seconds in. So you'd have to sit there and wait 2000 seconds before you'd see that animation start (after you scroll past the starting scroll position of course). 
4. There's no such thing as an ease on a ScrollTrigger. 
5. You're using the very old ease syntax

   // bad/old
   ease: Power4.easeInOut
   
   // good/new
   ease: "power4.inOut"

Good luck!