Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
annam

Custom Easing does't work with seek

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

Hello,

 

we have created a custom easing function for a Spring ease implementation using the following suggestion and it is working great: 

 

However we have a problem with the seek function, as you can see from the jsfiddle attached: https://jsfiddle.net/juw06kz5/1/

(the ease code is copied from a compiled typescript implementation - apologies!)

 

Use the play button to see the correct animation, then "Run" the fiddle again to use the slider to seek back and forth. You will see that when using seek, the ease disregards the time requested in seek(x) and moves linearly. When a single "loop" of the total duration of the spring animation has been completed, the only values the seek will respect is seek(0) and seek(1). 

 

The problem with the seek, seems to be that the implementation of the SpringRK4 algorithm depends on the previous state of the animation to calculate the new one (http://mtdevans.com/2013/05/fourth-order-runge-kutta-algorithm-in-javascript-with-demo/) You can see this in the jsfiddle, in the step() and integrate() functions.

 

Do you have any suggestions on how to fix this issue? 

Thanks,

Anna

 

See the Pen by juw06kz5 (@juw06kz5) on CodePen

Link to comment
Share on other sites

From what I gather, you are exactly right:

 

Quote

The problem with the seek, seems to be that the implementation of the SpringRK4 algorithm depends on the previous state of the animation to calculate the new one

 

Any ease the GSAP uses needs to be able to return the proper value when getRatio() is called at any time regardless of the previous state.

 

 

Keep in mind that our CustomWiggle and CustomBounce solve a similar problem.

https://greensock.com/wiggle-bounce

 

They allow you to pass in a few parameters to create extremely intricate ease curves. In your situation you could technically make your spring algorithm create the proper svg path data that you could then pass into CustomEase. That's exactly how CustomWiggle and CustomBounce work.

 

Watch this video at time 9:43 to see how CustomWIggle's svgData can be passed to CustomEase.

 

  • 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.
×