Jump to content
Search Community

scrollTrigger - restart/reverse timeline on: "onEnterBack" (or onLeave)?

mrsam test
Moderator Tag

Recommended Posts

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

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

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

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

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

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

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 

  • Like 1
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...