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