How to clear animation style cache?

[Zaynex]

Hi, I have a question: How to reset animation ?

You can see demo in here.

https://codepen.io/zaynex/pen/poyoXRL

const { easing, tween, styler } = window.popmotion;

const divStyler = styler(document.querySelector('.box'));

tween({
  from: 0,
  to: { x: 300, rotate: 180 },
  duration: 1000,
  ease: easing.backOut,
  // elapsed: 500,
  // loop: 5,
  // yoyo: 5
}).start(divStyler.set);

setTimeout(() => {
  // after I remove style, it still show at position x 300 ,rather than  x 0.
  document.querySelector('.box').removeAttribute('style')
  tween({
    from: {scale: 0},
    to: {scale: 1},
    duration: 2000
  }).start(divStyler.set)

}, 3000)

What I expect is that if the box has finished the first tween animation, then reset the box style, and excute new animation. But after I excute the twice anmiation(in setTimeout), the preview styles still there.

I look up the source code that

https://github.com/Popmotion/popmotion/blob/d5d4a408d68dda6102c6a2fe2d708572ffbc9916/packages/stylefire/src/styler/index.ts#L10

state holds previous final x .

How can I clear the previous state.

Thanks.

[stokesman]

To get your second tween to reset styles from the first, use the from property in the second tween with those properties that need reset.

  tween({
    from: {scale: 0, x:0, rotate:0},
    to: {scale: 1},
    duration: 2000
  }).start(divStyler.set)

If you really need to clear all styles without specifying each one, I think the easiest way would be making a new element and new styler. As an example:

  const oldBox = document.querySelector('.box');
  const newBox = oldBox.cloneNode();
  newBox.style = '';
  oldBox.replaceWith(newBox);
  const newStyler = styler(newBox);
  tween({
    from: {scale: 0},
    to: {scale: 1},
    duration: 2000
  }).start(newStyler.set)

[Zaynex]

Thanks. @stokesman By the way ,evety time I call tween, it's not idempotent. I can't predict what next animation happened. I hope the popmotion can provide some api that I can clear or reuse last animation style result.