Looking for ScrollTrigger equivalent to ScrollMagic's reverse: false

[selvinkuik]

I feel a bit apprehensive posting this as I really thought it would be something I could find in a search. I'm in the process of converting a project from ScrollMagic to ScrollTrigger.

 

As the title says, I'm looking for the reverse: false equivalent in ScrollTrigger but I can't seem to find anything on this. Does it exist? Hoping someone tells me I'm being blind!

 

EDIT: Just to clarify, I'm aware of the once: true option, but only kills the animation once the end point is reached, meaning you could scrub backwards and forwards before you have reached the end. I'm looking for a way to only scrub forwards...

[mikel]

1 hour ago, selvinkuik said:

I feel a bit apprehensive posting this as I really thought it would be something I could find in a search.

 

Hey @selvinkuik,

 

You could also study the DOCs and e.g. keep an eye on toggleActions.

 

toggleActions

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

Happy scrolling ...

Mikel

[selvinkuik]

Thanks @mikel

 

I did read that. Maybe I'm not understanding. I don't want my animation to scrub backwards – even before the end of the animation has been reached.

 

For example, here the parallax works going right but not left.

 

See the Pen poyowxq by selvinkuik (@selvinkuik) on CodePen

 

From my understanding of toggleActions, you have to get to one of the toggle places (e.g. the end) before you can trigger an action. Put it another way, I want to scrub forwards only, not backwards

[ZachSaucier]

Hey selvinkuik and welcome.

 

Currently there's no built in functionality to do this for you with ScrollTrigger but you can easily do it yourself by making use of the ScrollTrigger's progress value in the onUpdate callback. Here's the same example but with ScrollTrigger:

See the Pen ZEWEXdo?editors=0010 by GreenSock (@GreenSock) on CodePen

[mikel]

Hey @selvinkuik,

 

Sorry for my snappy answer  - I didn't read your first post with concentration. Could have understood your intention.

The example visualized in the CodePen then also helps me on the jumps.

 

Here just for fun

 

See the Pen qBZBzje by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel