Jump to content
Search Community

3d rotate jumps in scrollTrigger

Jess.Park test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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)

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

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.

 

  • Like 2
Link to comment
Share on other sites

  • Solution

You've got a bunch of logic issues where you're creating overlapping/conflicting animations. A few tips:

  1. 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. 
  2. 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. 
  3. 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

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