Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
will@engage

Long animations jumping at the start/end when using easing

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

Share this post


Link to post
Share on other sites

Hello will@engage, and Welcome to the GreenSock Forum!

 

Just so we can understand your issue more.

  • What browser and browser version are you seeing this in?
  • What OS and OS version are you seeing this in?
  • What device are you seeing this on?

Thanks! :)

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Pretty cool Carl !!

 

It took awhile to find the right values for my solution. But using the modifiers function looks more clean and expandable ;)

 

But timeScale() is quick and sweet like butter :)

Share this post


Link to post
Share on other sites

You read my mind Carl. I immediately thought of timeScale() as a possible solution.

 

See the Pen grBZRN by PointC (@PointC) on CodePen

 

:)

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hi everyone,

 

Thanks so much for replying. I'll have a proper read through everything and let you know where I end up!

 

Cheers,

Will

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×