Jump to content
Search Community

Scramble Text only when in viewport

Dennyno test
Moderator Tag

Recommended Posts

Hey there @Dennyno,

 

The simplest way would be to add a scrollTrigger to the timeline like so.

See the Pen wvrvxqQ?editors=1010 by GreenSock (@GreenSock) on CodePen



Check out the docs for more information on how to customise the scrollTrigger for your specific needs 

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

Hope this helps!

  • Like 4
Link to comment
Share on other sites

3 minutes ago, Cassie said:

Hey there @Dennyno,

 

The simplest way would be to add a scrollTrigger to the timeline like so.
 

 


Check out the docs for more information on how to customise the scrollTrigger for your specific needs 

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

Hope this helps!

 

 

Oh well thanks.

Just one point: How to reverse / restart while scrolling up again?
Thank you @Cassie:)

Link to comment
Share on other sites

Sure thing - You're looking for toggleActions

From the docs, (I recommend popping over and giving the video a quick watch if this is all new to you!) - 
 

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".
  • Like 1
Link to comment
Share on other sites

23 minutes ago, Cassie said:

Sure thing - You're looking for toggleActions

From the docs, (I recommend popping over and giving the video a quick watch if this is all new to you!) - 
 

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".

Great!
Gonna study hard again :)
tx

  • Like 1
Link to comment
Share on other sites

1 hour ago, Dennyno said:

Great!
Gonna study hard again :)
tx

I changed the code, as you can see, but now it takes only the last element on the array.
What's wrong? And why does it require the pin to be active, while I prefer this to just follow the scrub?

Tx again

Link to comment
Share on other sites

9 hours ago, Dennyno said:

I changed the code, as you can see, but now it takes only the last element on the array.

I think you just didn't give it time to run all the way in reverse before scrolling back down. Remember, it just reverses when you scroll back up according to your toggleActions. 

 

Or did I misunderstand your question? 

 

If you want it to scrub, you'd need to set scrub: true or maybe scrub: 1 (or more) to get a smoothing effect. Like this: 

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...