Nysh Posted August 1, 2020 Share Posted August 1, 2020 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 Thanks, N. See the Pen bGEXaEP by Nysh (@Nysh) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 1, 2020 Share Posted August 1, 2020 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 More sharing options...
Nysh Posted August 1, 2020 Author Share Posted August 1, 2020 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 More sharing options...
GreenSock Posted August 1, 2020 Share Posted August 1, 2020 I see what you mean, @Nysh, and it looks like that was a regression in the 3.4.0 core. Sorry about that. I've implemented a fix in the upcoming release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js 2 Link to comment Share on other sites More sharing options...
GreenSock Posted August 1, 2020 Share Posted August 1, 2020 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. 3 Link to comment Share on other sites More sharing options...
Nysh Posted August 2, 2020 Author Share Posted August 2, 2020 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 More sharing options...
GreenSock Posted August 2, 2020 Share Posted August 2, 2020 It should be out by the middle of the week I'd guess. 👍 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