Dennyno Posted November 30, 2021 Share Posted November 30, 2021 Hi, I was trying the amazing ScrambleText addon, which a customer has paid, and works perfectly. But how to integrate this with Scrolltrigger to make the scramble working only when in viewport, and don't start on dom ready, which is no-sense (in my case)? Thanks See the Pen KKXKmqe by DedaloD (@DedaloD) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted November 30, 2021 Share Posted November 30, 2021 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! 4 Link to comment Share on other sites More sharing options...
Dennyno Posted November 30, 2021 Author Share Posted November 30, 2021 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 More sharing options...
Cassie Posted November 30, 2021 Share Posted November 30, 2021 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". 1 Link to comment Share on other sites More sharing options...
Dennyno Posted November 30, 2021 Author Share Posted November 30, 2021 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 1 Link to comment Share on other sites More sharing options...
Dennyno Posted November 30, 2021 Author Share Posted November 30, 2021 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 More sharing options...
GreenSock Posted November 30, 2021 Share Posted November 30, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now