mrsam Posted March 12, 2021 Share Posted March 12, 2021 I have list of text that I fade up from : 0 > 1 - a long the span of my scrub scroll. This is how it works pr. initial setup: (see codepen below) 1. onEnter: (scrolling: top to bottom) text 1, text 2, text 3, text 4, text 5 (fade up) 2. onEnterBack: (scrolling: bottom to top) text 5, text 4, text 3, text 2, text 1 (fade down) My "issues" is that: - when I hit onEnterBack (or perhaps trigger the following on: onLeave), I basically want to restart the animation, so it will be like the flow in point 1 again (onEnter) (= I want to give the same text effect experience as coming from top) - and when I then hit onLeaveBack,- again - then reverse back to "initial" (normal point 1) state Is that possible somehow? See the Pen vYybGNE by mrsgs (@mrsgs) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 12, 2021 Share Posted March 12, 2021 Hey mrsam. What's the point in using the ScrollTrigger callbacks? Here's the same thing but with the callbacks removed. Is this what you're wanting? If not, how so? See the Pen MWbLbOq?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
tailbreezy Posted March 12, 2021 Share Posted March 12, 2021 Hello, I think the goal (on reverse) is to play 1,2,3,4,5,6 in that order opposed to 6,5,4,3,2,1, so scrub will not be appropriate. Probably two timelines will be best with onStart and onEnterBack. Link to comment Share on other sites More sharing options...
mrsam Posted March 12, 2021 Author Share Posted March 12, 2021 8 minutes ago, tailbreezy said: Hello, I think the goal (on reverse) is to play 1,2,3,4,5,6 in that order opposed to 6,5,4,3,2,1, so scrub will not be appropriate. Probably two timelines will be best with onStart and onEnterBack. Yes spot on! What you propose, would I be able to "tie" that to section scrub as it currently works? I have a hard time figuring out how to do that Link to comment Share on other sites More sharing options...
mrsam Posted March 12, 2021 Author Share Posted March 12, 2021 14 minutes ago, ZachSaucier said: Hey mrsam. What's the point in using the ScrollTrigger callbacks? Here's the same thing but with the callbacks removed. Is this what you're wanting? If not, how so? Hi Zach! I just figured the callback functions could be leveraged to somehow trigger and reverse some things. But what and how i've not managed to figure out yet In your "cleaned" version, when you scroll back it does 6,5,4,3,2,1 - whereas I want it to do 1,2,3,4,5,6 again (as it did onEnter) Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 12, 2021 Share Posted March 12, 2021 In that case there's definitely cases where the animations would conflict. Like when the user scrolls super fast past the section - the in animation is still running when the out animation should start. What should happen in this case? Should the in animation finish then the out animation run? Or should the animation be cut off and the out animation run from whatever state it's in? Link to comment Share on other sites More sharing options...
mrsam Posted March 12, 2021 Author Share Posted March 12, 2021 8 minutes ago, ZachSaucier said: In that case there's definitely cases where the animations would conflict. Like when the user scrolls super fast past the section - the in animation is still running when the out animation should start. What should happen in this case? Should the in animation finish then the out animation run? Or should the animation be cut off and the out animation run from whatever state it's in? Good thoughtfull catches It could be handled somewhat just like in my CodePen: -> onLeave (top to bot - scroll done) = I hide the container -> and then - Trigger (and prepare) whatever reverse (or similar) swaps needed to play 1,2,3,4,5,6 ->> onEnterBack (bot to top scroll "restart") = I un-hide the container -> Timeline starts playing again. ->>> onLeaveBack (bot to top - scroll done) = I hide the container -> Revert back to initial state ->>>> onEnter - all is normal again Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 12, 2021 Share Posted March 12, 2021 Sorry, I don't understand the logic of what you're saying and how that applies to the conflict that I'm pointing out. How does doing anything with the container fix the conflict that I mentioned? Link to comment Share on other sites More sharing options...
mrsam Posted March 12, 2021 Author Share Posted March 12, 2021 26 minutes ago, ZachSaucier said: Sorry, I don't understand the logic of what you're saying and how that applies to the conflict that I'm pointing out. How does doing anything with the container fix the conflict that I mentioned? Sorry Zach, perhaps im misunderstanding what you're saying. If I scroll super fast past the section (like you mention): and reach the end of the section scroll - then callback onLeave is triggered, right? So regardless of how fast I scroll past that section onLeave is always triggered. So when it is triggered I know my section scrub is done. When my section scroll is done - I want to restart/ or make sure, when you scroll up again then it will be 1,2,3,4,5.Here a "conflict" will happen yes,- since we need to swap/reverse/prepare current visible scrolled 1,2,3,4,5 - into an -> in-visble 1,2,3,45 - that would result in an "on/off flicker" of the text ... Knowing there's a conflict that given moment, I just hide (fade out) the text container when onLeave is triggered -> do the flicker "conflict" swap -> and when scroll back will happen = onEnterBack - noone will ever know there was a conflict Hiding the text container when the swaps happen, is what I am doing in my CodePen already. But tampering with the scrollTrigger/timeline, reversing/restarting as mentioned, this is what im unsure about how to handle Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 12, 2021 Share Posted March 12, 2021 Ah, so you're picturing that the scrub would be retained through all of this. I don't think that's a great idea implementation wise if you need to animate in the items from the first one to the last one regardless of the direction being entered. You'd need to kill off the old animation and make a new one, making sure to update or recreate the ScrollTrigger which is messy. If I were you, I would either A remove the scrub completely, use once: true and just stagger in the reveal like this: See the Pen wvoNJYM by GreenSock (@GreenSock) on CodePen Or use two ScrollTriggers along with toggleActions to reset the animation like this (this technique is covered in the most common ScrollTrigger mistakes article): See the Pen MWbLpMr?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
tailbreezy Posted March 12, 2021 Share Posted March 12, 2021 Here is another way. The approach with two scrollTriggers is quite nice. 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