Way to preserve existing transform properties (rotations) ?

[lawrensylvan]

Hi and first of all thank you for this awesome library.

During my experience with this library, it seems that I am unable to achieve a simple thing : animate an element for which I assigned a preexisting transform: rotate(...) css property. It seems react-flip-toolkit is replacing the transform property with a new transform with the necessary translations but get rids of the transform ?

Ideally I would like to be able to animate rotations (support for such animations is not mentioned in the doc of this library, nor it is for the other FLIP libraries). But even if I'm not able to animate them, I would like to be able to keep them with their existing rotation value.

If you can confirm that the behaviour I'm describing should not happen, then I can dig deeper and provide a POC example of the problem. Thanks a lot.

[dudo]

I think I have a similar question. I'm moving an element from 1 parent to another. With no rotation, this works beautifully. My use case is a playing card game, so think a draw pile and some players spaced out in a circle of sorts.

Anyway, I created a little demo of what this looks like:

https://codesandbox.io/s/wizardly-tree-gzxzy?file=/src/App.js

Any thoughts @aholachek ?

[tkriplean]

I also have this issue. You can work around it though, fairly easily. Probably way too late for you both, but perhaps useful to others later.

react-flip-toolkit exposes the spring method that is used under the hood to update your animation over time. So you can just instantiate the spring directly, and use it to update your transform.

var my_el = (...) // some HTML element you want to apply a transform to

ReactFlipToolkit.spring({
  config: 'gentle',
  values: {
    scale: [1, 1.5]
  },
  onUpdate: ({scale}) => {
    return my_el.style.transform = `scale(${scale})`;
  },
  onComplete: () => {
    return title_text.style.transform = null;
  }
});

Usually though you'll already have a Flipper instantiated. You can use the onSpringUpdate callback to get the current spring value and update your transform accordingly.

Here's some super ugly pseudo pseudo code to give a hint:

Flipper
  spring: "gentle",

  (...)

  Flipped
    (...)
    onSpringUpdate: (val) => { 
      var start = 1;
      var target = 2;
      var my_el = (...) // some HTML element you want to apply a transform to, scaling between 1 and 2
      my_el.style.transform = `scale(${start + val * (target - start)})`;
     }