Custom Easing does't work with seek

[annam]

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

[Carl]

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.