Pre-defined animations?

[Toshinaki]

Some react animation packages has predefined animations like "BounceIn", "SlideDownOut", etc.

Is there something similar in react-spring?
Or is there a list shows animation name and example code as key:value pairs?

[tomdohnal]

React Spring has some presets. Its documented on https://www.react-spring.io/docs/hooks/api in the "Presets" section.

Nonetheless, you should bear in mind that React Spring uses so-called "spring" animations which are physics-based emulating the movement of spring rather than "easing-based" which are defined using a function of the rate of change during time.

The "BounceIn", "SlideDownOut" and so on are different easing function which are not natively supported in React Spring.

However, if you insist on not using physics-based animations and prefer "easing-based" ones, you can achieve that by passing a duration to the config property. You can also pass an easing function by providing easing on the config property.

import * as easings from 'd3-ease'

// ...
// ...
useSpring({ opacity: toggle ? 1 : 0, config: { duration: 250, easing: easings.easeBounceIn  }})

[Toshinaki]

I'm currently using velocity-react in our project, but it's not actively maintenanced.

We would like something more powerful but do not want to change the UI too much. If we transfer to react-spring, re-write all animations by myself seems a great pain...

(Sorry but to be honest, for me, how everything is implemented is not very important. Time is limited and got a lot of work left😿)
(of course, I will do the research when not busy)

Something out of the box like

const props = useSpring("slideLeftIn", {/*...some extra configs if needed*/});

return <div {...props}>...</div>

would be very helpful.

For now, I'll stick to velocity-react, but will dive deeper in to react-spring when I got time.

I've learned a lot from your comment. Thank you!!💖