1

I want to use react-flip-toolkit to create an animation like that, but I am already using react-spring to bring some transitions to my page, so I want to switch from animejs to react-spring instead of both.

Following another codesandbox I create a small version just to test some things, you can see it here. Then I tried to switch (with this example) from animejs to react-spring and I created this codesandbox. It still not working as expected but I try to replicate this behavior in my webapp.

In my webapp I am unable also to fire up onRest event callback. I did:

const Card = ({ item }) => {
  const [spring, api] = useSpring(() => ({
    opacity: 1,
    transform: 'scale(1)',
  }));

  const onExit = (el, index, removeElement) => {
    console.log('onExit');

    api.start({
      opacity: 0,
      transform: 'scale(0.9)',
      onRest: () => { console.log('onRest'); },
  });

  return (
    <Flipped
      flipId={item.vizcartPath}
      stagger
      onExit={onExit}
    >
      <animated.div className="col-6 col-md-4 col-xl-3 p-5 card-container" style={spring}>
        TEST
      </animated.div>
    </Flipped>
  );
};

const Container = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  
  return (
    <Flipper
      flipKey={searchQuery}
      decisionData={searchQuery}
      className="row"
    >
      {searchResults.map((item) => (
        <Card
          key={item.id}
          item={item}
        />
       ))}
    </Flipper>
  );
}

searchQuery is a string update with a form input, searchResults is array of objects with all items filtered by searchQuery content.

Am I doing something wrong with onRest callback? It is working on codesanbox and not in local and I already try to comment out all code not relevant. I am using gatsbyjs in my webapp, could be something related to that?

Info: react: 17.0.2. gatsby: 3.4.0. react-spring: 9.1.2 react-flip-toolkit: 7.0.13 node: 15.11.0

lezan
  • 759
  • 6
  • 23

0 Answers0