Jess.Park Posted July 13, 2021 Share Posted July 13, 2021 Hi. I want to rotate object when it's in the middle of viewport, and when it's not slowly return to original rotate. (0deg) rotatejumps2.mov It rotates smoothly when entered, but when re-enter it jumps. (please see the attached video) How can I fix this? Related code is in line 100 of the codepen. See the Pen gOWLajZ?editors=0111 by impetusjj (@impetusjj) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted July 13, 2021 Share Posted July 13, 2021 Hi Jess! That sure is a lot of code to go through. Maybe try making a minimal demo instead. My guess is that you might have conflicting --rotate animations. Also, you can get rid of all those refs with the new selector util. See the Pen BaWOZpM by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
akapowl Posted July 13, 2021 Share Posted July 13, 2021 2 hours ago, OSUblake said: That sure is a lot of code to go through. Maybe try making a minimal demo instead. My guess is that you might have conflicting --rotate animations. Trying to break things down to an absolute minimum also helps yourself finding possible sources of error. I noticed that while your onEnter and onEnterBack callbacks are inside the scrollTrigger object of the timeline (where they are supposed to be), your onLeave and onLeaveBack callbacks are not inside the scrollTrigger object. Changing that does not actually fix your issue - but it might prevent other errors occuring further down the line. 2 Link to comment Share on other sites More sharing options...
Jess.Park Posted July 14, 2021 Author Share Posted July 14, 2021 I made minimal demo! Could you check it again, please? @OSUblake @akapowl See the Pen LYybpre by impetusjj (@impetusjj) on CodePen It also jumps when re-entered. Does this have something to do with css variables? Link to comment Share on other sites More sharing options...
Solution GreenSock Posted July 14, 2021 Solution Share Posted July 14, 2021 You've got a bunch of logic issues where you're creating overlapping/conflicting animations. A few tips: You don't have to create a timeline if you're only going to populate it with one tween. Just put your ScrollTrigger on the single tween instead and skip the timeline. It's fine to do it the other way, but it's just a tad wasteful. By default, ScrollTrigger animations will render immediately which means they lock in their starting/ending values right away to maximize performance. In your case, though, you had one TWO animations affecting identical properties and you wanted the 2nd one to pick up where the first one left off, so set immediateRender: false on that 2nd one. You had it animating back to "0deg" on everything but it starts out that way anyway, so your tween locked in the starting values which were identical to the end values, thus nothing was happening. If you're just using callbacks, there's no reason to put the ScrollTrigger into an animation. Just use ScrollTrigger.create(). I assume you wanted something more like this?: See the Pen XWRpVBz?editors=0010 by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
Jess.Park Posted July 14, 2021 Author Share Posted July 14, 2021 Wow, I learned so much from this! Thank you so much! 😆 1 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