Can I use scrub with toggle actions? Currently, if I add scrub: false my animation doesnt work properly but if I add scrub: true , toggle actions no longer work

[daniaH]

.to('.step-3', {

duration: 8,

opacity: 1,

x: 25,

scrollTrigger: {

trigger: '.icons-section',

start: '+=1550',

end: '+=500',

scrub: true,

markers: false,

toggleActions: 'play none none reset',

},

})

[GreenSock]

It's logically impossible to have both. Can you explain your reasoning and why you think it would be helpful to have scrub: true and toggleActions too? I think you may not understand what one or both of those does, so your explanation may help illuminate the misunderstanding. 

[daniaH]

I want to use toggle actions so that the animation does not play when the user scrolls back to the top but does play when they scroll back down.

I added scrub because my right to left animation was not running smoothly, it was just appearing not sliding in.

[Cassie]

Hey pal!

So scrub shouldn't be needed just to make your animation work - scrub is used to 'tie' that animation's progress to the scroll position. 
 

38 minutes ago, daniaH said:

I added scrub because my right to left animation was not running smoothly, it was just appearing not sliding in.

toggleActions is used to explain how you'd like the animation to be controlled as it enters and exits - if you're 'scrubbing' an animation you can't also tell the browser to reverse or replay it as it's already tied to the scroll progress. Make sense?

If you'd like to only play when you scroll down the first time you can add once: true - this will kill the scrollTrigger as soon as the end position is reached.

demo here -

See the Pen 7a8380a7499962572bb40a2e400ca6f3 by cassie-codes (@cassie-codes) on CodePen

[daniaH]

the once: true , would also prevent it from replaying is the only issue. Do you see anything in my code that would effect the slide in functionality? If I don't add scrub, the slide left effect doesn't happen it just fades in - see css below

&.step-3 {

opacity: 0;

transform: translateX(20vw);

display: block;

}

[daniaH]

.to('.step-3', {

duration: 8,

opacity: 1,

x: 25,

scrollTrigger: {

trigger: '.icons-section',

start: '+=1550',

end: '+=500',

// scrub: true,

markers: false,

// once: true,

toggleActions: 'play none none reset',

},

})

[GreenSock]

@daniaH it's very difficult for us to understand what you're asking or to provide advice without a minimal demo. Can you please provide one? I don't know what you mean by "slide in functionality". I don't know why you're using a relative start position either - I don't think I've ever seen someone do that before. 

 

Once we see that demo (like a CodePen or JSFiddle), I'm sure we'll be able to provide better input.