Cancel Image Reveal Effect Repeat

[Sıradışı Digital]

Hello, I have a sample project at codepen.io. The image opens when you scroll down the page. When it goes up, the picture turns off. I just want the picture to open when it goes down. When you go up again, the picture does not turn off. Animation needs to run once. Would you help me with this topic?

See the Pen bGjeorr by mrtsiradisi (@mrtsiradisi) on CodePen

[akapowl]

Hello there,

 

if you only want to disable it once it has reached its final position, you could just set once: true on the ScrollTrigger.

 

See the Pen ZEjOaBg by akapowl (@akapowl) on CodePen

 

 

 

If on the other hand you only want it to scrub in one direction to begin with, here's an example that shows how you could achieve that, leveraging the onUpdate callback of a ScrollTrigger.

 

See the Pen abZjjNr by GreenSock (@GreenSock) on CodePen

 

[Carl]

thanks for the demo. nice job!

 

If you want a ScrollTrigger animation to only run once you can set once:true

 

See the Pen ExpybZV?editors=0010 by snorkltv (@snorkltv) on CodePen

 

From https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Boolean - If true, the ScrollTrigger will kill() itself as soon as the end position is reached once. This causes it to stop listening for scroll events and it becomes eligible for garbage collection. This will only call onEnter a maximum of one time as well. It does not kill the associated animation. It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed. It also sets the toggleActions to "play none none none".

[Sıradışı Digital]

Wow... Good to know that. Thank you.