Jump to content


ScrollTrigger scroll issue (toggle actions?)

Recommended Posts

Not sure what I'm doing wrong here. Any help would be fantastic :)

I'd like the animation to play forwards when the scroller start is triggered (scrolling down) and reversed when the user scrolls back up.

My issue has to do with the first time it is triggered  on scrolling down. If the animation is given the opportunity to play the whole way through, then it works as expected. However, if the user scrolls back up before the animation has fully completed, instead of reversing, the animation jumps to the end state.

This issue only happens on the first scroll down, only if the animation has not fully completed AND the user decides to scroll back up (while it is playing forwards).

I've watched the intro vids, but I feel like I'm missing something kind of basic :P


See the Pen bGEXaEP by Nysh (@Nysh) on CodePen

Link to comment
Share on other sites

Hey Nysh. I think you're looking for 

toggleActions: "play none reverse none"

The third value is onEnterBack which is when I think you want it to reverse.

Link to comment
Share on other sites

Hi Zach, 

thanks for getting back :) 

The issue is still there with onEnterBack set to "reverse". Try scrolling past the trigger and quickly back up before the animation is complete. The animation just jumps straight to the end and then no longer works?

If on the first time scrolling down, you give it enough time to play through before scrolling back, then it works (and continues to subsequently work). But if the user scrolls down and back up quickly, for the first time, before the animation is complete - thats where i'm seeing the animation fail. 


See the Pen ZEQgjWZ by Nysh (@Nysh) on CodePen


Link to comment
Share on other sites

I forgot to mention a few things:

  • You're setting invalid transformOrigin values. You're doing one-word keywords like transformOrigin: "bottom" but it's supposed to be two values, space-delimited like "center bottom" or "50% bottom", etc. 
  • You inverted the -= in your relative position parameter values. It's "-=0.35", not "=-0.35"
  • You're using the old syntax where the duration is the 2nd parameter, but I'd recommend switching to the more modern v3 syntax where you set duration in the vars object. It still works either way, but eventually when v4 gets released, the really old v2 syntax probably won't work. 
  • Like 3
Link to comment
Share on other sites

ahh no worries!

Hey thank you so much for all the info. :) will def move to the new syntax. What's the ETA looking like for the upcoming release? 

Link to comment
Share on other sites

It should be out by the middle of the week I'd guess. 👍

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.