COVID19 LockDown Dev Log – Day 14, React Spring

What I Worked On

Adding animations with React Spring

What I Learned

How React Spring works, more or less. I watched the conference talk from React Conf 2015 that is on their website (link in Resources), which explains the idea behind React Spring and how to use it. Quite informative.

In short, you can animate with React Spring in 4 ways: Spring, Trail, Transition and Parallax. I’ll be looking into Spring for my project – I gotta try Parallax at some point though! It looks awesome!

Let’s install the React Spring library:

npm install react-spring

Now, I want a ‘scroll’ component containing an icon with animated properties. Let’s make that component and call it ‘scrollIcon.js’:

// scrollIcon.js

import React from "react"
import ScrollArrow from "../../assets/svg/arrow-icon.svg"

export default function scrollIcon() {
    return (
        <div>
            <a href="#projects">
                <ScrollArrow />
            </a>
        </div>
    )
}

Note: The ScrollArrow is an SVG I have in my project. Link to repo here.

The component is created. Let’s import the ‘Spring’ module from React Spring. This will let us animate the component. After importing ‘Spring’ we can now add it to our component like so:

// scrollIcon.js

import React from "react"
import { Spring } from "react-spring/renderprops"
import ScrollArrow from "../../assets/svg/arrow-icon.svg"

export default function scrollIcon() {
    return (
        <div>
            <Spring
                from={{ transform: `translate(0px, 100px)` }}
                to={{ transform: `translate(0px, 0px)` }}
                >
                {props => <div style={props}>  
                    <a href="#projects">
                        <ScrollArrow />
                    </a>
                </div>}
            </Spring>
        </div>
    )
}

The ‘from‘ and ‘to’ might seem selfexplanatory, but for the sake of it I’ll let you know that it basically means from where the animation should start and where it should end. You can target a lot of CSS properties:

• colors (names, rgb, rgba, hsl, hsla, gradients)
• absolute lengths (cm, mm, in, px, pt, pc)
• relative lengths (em, ex, ch, rem, vw, vh, vmin, vmax, %)
• angles (deg, rad, grad, turn)
• flex and grid units (fr, etc)
• all HTML attributes
• SVG paths (as long as the number of points matches, otherwise use custom interpolation)
• arrays
• string patterns (transform, border, boxShadow, etc)
• auto is valid
• non-animatable string values (visibility, pointerEvents, etc)
• scrollTop/scrollLeft (native only, since these aren’t actual dom properties)

The list is shamefully copy-pasted from React Spring here.

If you choose not to add a delay or duration to the animation it will fire once the page is loaded and animate “naturally”. When I say “naturally” I mean like the way we perceive physics. Go to React Spring’s website where they elaborate further on that if you’re interested 😀

Anyways, our end result looks like this (Note that it accelerates and decelerates):

What Distracted Me During The Day

• Phonecalls
• Emails
• Messenger

Resources

• React Spring – https://www.react-spring.io/
• React Conf 2015 State of Animation – https://www.youtube.com/watch?v=1tavDv5hXpo&feature=emb_title
• Simple tutorial on React Spring by Traversy Media – https://www.youtube.com/watch?v=S8yn3-WpVV8