multiple animations (timeline) in react-spring

Question

I have a component with 2 Boxes and a shadow:

First Box is outside the view: topBox Second Box is inside the view at the bottom: middleBox Third is the shadow of the Box on the bottom (a png): Shadow

If i start the animation (or if the component loads) i want to have the following animation:

Step 1

middleBox move up 50px
shadow grows (from scale(0.8) to scale(1))

Step 2

topBox moves down 50px into the view

Step 3

(this animation should look like the two boxes smash into each other, like if if they would crash. like two balls hitting each other and go back to origin.)

middleBox moves up 20px and back down 20px
topBox moves down 20px and back up 20px
Shadow scales 1.1 and back to 1

Step 4

topBox moves back outside the view

So i created useSprings for all steps and i tried to update state when the first animation finished based on this update the other animation. i also tried with useChain to have the animations together. But nothing seems to work.

so i would have state

const [isAnimationMove, setAnimationMove] = useState(true)
const [isAnimationHit, setIsAnimationHit] = useState(false)

and then change the state after the second animation finishes to trigger the new animations

const topBoxMoveDown = useSpring({
    from: { transform: 'translate(-20%, 100%)' },  
    transform: 'translate(-10%, 60%)',
    onRest: () => {
        setAnimationMove(false);
        setIsAnimationHit(true);
    }

and render the different animation on the element

 <BoxFromTop 
     animationStyle={
        isAnimationMove ? topBoxMoveDown :
        isAnimationHit ? topBoxHit : null } />

which is

const topBoxHit = useSpring({
    from: { transform: 'translate(-10%, 60%) rotate(0)' },
    transform: 'translate(-10%, 55%) rotate(10deg)', 
    reset: true,
});

However it works kind of as long as i would not use transform again in the topHitBox but i think my question is more about the concept in general:

How do i animate different states and have control over what starts when and what follows what. I mean i just be a simple animation with multiple steps but i can not get my head around how this works with react-spring. Am i using the wrong library? is there a better one to use for this? or did i just use the wrong approach?

multiple animations (timeline) in react-spring

0 Answers0