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

  • 1,200