Jump to content
Search Community

Long animations jumping at the start/end when using easing

EngageDevs test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey everyone!

 

I have come across a small issue and was wondering if someone could help me sort it out.

 

To quickly give some background: I'm building a simple app which randomly picks a person by spinning a wheel of names. The wheel spins a few times before eventually resting on the target. I've found that with longer animations and more complex easing equations the end of the animation jumps a proportion of the distance / rotation.

 

I've recorded a couple of examples below:

 

Easing: Power0.easeNone

no-jump.gif

 

Easing: Expo.easeOut

jump.gif

 

As you can see, at the end of the animation there is a tiny little jump. For the sake of the gif I've actually shortened the tween duration and reduced the amount of rotation. If I increase it the jump is even more pronounced.

 

Take a look at the CodePen example as well which illustrates the issue. While setting up that example I also noticed that there is a jump at the beginning of the tween.

 

Does anyone have any ideas of how to sort this?

 

Thanks,

Will

See the Pen OXBzWW by willblackmore (@willblackmore) on CodePen

Link to comment
Share on other sites

Hi Will,

 

That looks like a cool project you are working on.

Thanks so much for taking the time to provide a very reduced demo that shows the issue.

 

Yes, I can see what appears to be some undesirable snapping / jumping at the beginning and end.

 

Before I go into my theory I just want to let you know that I'm not the most informed person when it comes to understanding exactly how browsers decide to behave.

 

In short, I just think at some point in time the amount of change that an expo ease creates is soooo ridiculously small that the browser ignores making any updates to what is rendered or its just not possible to discern any difference in rotation.

 

Consider that for an Expo.easeOut ease the curve gets virtually flat (no change) for about the last 20% of animation

 

ce71bf70dc074556bb8788ef1414ff51.png

 

For roughly the last 0.5 seconds of animation (30 updates) these are the rotation values that your tween generates

 

2158.0346100319352

2158.0803868554544

2158.1224965001707

2158.1662263185603

2158.2064529436147

2158.2482272929333

2158.2890286562047

2158.326561424519

2158.365538270633

2158.403607288665

2158.4386265997655

2158.474993283096

2158.5105129328754

2158.5452052777605

2158.577118420814

2158.6102594259055

2158.642628528237

2158.672404543569

2158.703326194692

2158.733527635074

2158.7613096397354

2158.7901605603865

2158.8199764950014

2158.8442610275747

2158.8711798883783

2158.8959422807297

2158.9231512736683

 


 

My assumption is that somewhere along the way the browser is struggling to display an increase in rotation of .015 degrees and it stays snapped until the final 2160 arrives.

  • Like 1
Link to comment
Share on other sites

Great catch Carl on the last bit of rotation values!

 

@will@engage .. what about adding another tween at the last second of the first tween?

 

Check this forked example of your codepen:

 

See the Pen bZmvkw by jonathan (@jonathan) on CodePen


 

var tl = new TimelineMax();

$('#rotate-me')
  .on('click', function(){
  
    tl
      .fromTo('#rotate-me', 10, {
        rotation: 0
      },{
        rotation: 2160,
        ease: Expo.easeInOut,
        force3D: true
      },0)
      // 2nd tween starts a half second in, for the last second of the first tween
      .to('#rotate-me', 0.5, {
        rotation: "+=2",
        ease: Power0.easeNone,
        force3D: true
      },"-=0.5");
  });

See if that helps!

 

I also added overflow: hidden on the body tag so you dont have the scrollbars moving your wheel of fortune from side to side.

 

:)

  • Like 2
Link to comment
Share on other sites

My assumption is that somewhere along the way the browser is struggling to display an increase in rotation of .015 degrees and it stays snapped until the final 2160 arrives.

 

Have you ever heard of Zeno's paradoxes?

https://en.wikipedia.org/wiki/Zeno%27s_paradoxes#Dichotomy_paradox

 

This sounds exactly like that. In theory, you can never arrive at your destination because you keep dividing the distance up into smaller and smaller units, making it infinite. But that's just theory. Computers do have limits, and it will eventually max out.

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