Abinav Seelan
UI Engineer @Flipkart • Ex @hashnode & @SaltsideTech • Javascript Junkie & Pokemon League Champion from India. https://abinavseelan.com 🙃
Animations in React
@abinavseelan
Abinav Seelan
UI Engineer @
@abinavseelan
blog.campvanilla.com
We're hiring!
bit.ly/jaldi-cli
The state of animations today
The state of animations today
CSS Transitions
CSS Animations
Vanilla Javascript & `style`
GSAP
Animations are hard.
CSS Animations
Give you easing functions for free
Easy to think about (keyframes)
Can't be cancelled/modified
Rigid (Duration)
Vanilla JS & `style`
Control
No longer tied into duration
Writing easing-functions is hard
React-Motion
A spring that solves your animation problems.
👋
<Motion />
API
<StaggeredMotion />
spring
<TransitionMotion />
API
<Motion />
<StaggeredMotion />
spring
<TransitionMotion />
spring
// Usage
spring(value, options);
// Simple spring animation to a value
spring(100);
// Tweaking the animations using stiffness & damping
spring(100, {
stiffness: 50,
damping: 50,
});Stiffness
The amount of force acting on the object
Greater the value, the faster the animation
Damping
The amount of resistance the object applies
Lower the value, the bouncier the animation
<Motion />
<Motion
defaultStyle={{
x: 0,
}}
style={{
x: spring(100)
}}
>
{
(interpolatedStyle) => {
// do something with the interpolatedStyle
}
}
</Motion>Demo
Live Code!
Demo gods, please be kind. 🙏
bit.ly/animations-in-react
That's all folks! 🚀
@abinavseelan
blog.campvanilla.com
Animations in React
By Abinav Seelan
Animations in React
Talk given at ReactJS Bangalore Meetup #34
