How to pass started state ?

[evdevru]

I have counter from 1 to 100. I want to start from easing on state 25 with expired time. I dont no how to calculate executed time if easing is not linear. How can i do it ?

[jeremyckahn]

Hi @evdevru, I think the seek method should serve your need. I put together a CodePen to show how it might work: https://codepen.io/jeremyckahn/pen/wvpgoVe?editors=1011

const output = document.getElementById("output");
const duration = 5000;

const tweenable = tween({
  from: { number: 0 },
  to: { number: 100 },
  duration,
  render: ({ number }) => {
    output.innerHTML = Math.round(number);
  }
});

tweenable.seek(0.25 * duration);

The thing to keep in mind is that you'll need to call seek right after starting the tween. Shifty should calculate all of the timing and easing offsets for you. Let me know if this helps!

[jeremyckahn]

If you use easing: 'easeInQuad', get 6.25 number, thats incorrect.

6.25 is the correct value for 25% of an easeInQuad tween. Here's the source for that easing:

shifty/src/easing-functions.js

Line 56 in 8bfdceb

export const easeInQuad = pos => Math.pow(pos, 2)

We can take this and plug in .25 for pos:

Math.pow(.25, 2) // 0.0625

Which is equivalent to 6.25 when it gets rendered. It seems that Shifty is working correctly here. Perhaps something else in your project needs to change in order to achieve the desired effect?

[evdevru]

Please, can correct me ? May be i dont understand

Example:

duration: 120000
easing: 'easeInQuad'
from: 1
to: 100
current: 2

In that easing 2 = ~12060 milliseconds (get using render)

2 = 2% of range 100
2% of 120000 (duration) = 2400 milliseconds, but i want to get 12060

In linear is working, but how to adopt to others

[jeremyckahn]

I'm not able to understand the issue given what's shown here. @evdevru would you be able to share a CodePen or something similar that demonstrates the problematic behavior?

[evdevru]

It's not problem with shifty, its question, how to start from needed state using easing. Check my comments: https://codepen.io/evdevru/pen/WNdRXPY?editors=1011

[jeremyckahn]

I think I might be understanding the issue here. It seems that your current code is trying to start from a static linear value, but that would only work for a linear easing. Shifty exposes the easing formulas as functions, so perhaps given your example you could have something like:

const startingPoint = Tweenable.formulas.easeInQuad((started / 100) * duration)

You'd probably have to do some more transformations to the number from there, but that might help to produce a proportional starting value.