Adding animations to Components with react-spring

This week, over at upwork, there was a job lisiting to build a site with Frontity, who would support a certain “no load” effect. Personally, one of the things I like about creating websites with React, is that effect where you wouldn’t load a newpage when you click on a link – instead the components who are visible to the user would just be replaced.

After seeing that job description, I thought maybe I could read something about it or atleast learn how to to implement that on my personal portfolio, to make the page transitions a bit smoother.

Animation Libraries

In general I was planning to add two different transitions: on the initial page load and when clicking on a link.

But what (popular animations libraries do exist already for using in React? After a bit of research I came accross about the following:

  • react-spring
  • Framer Motion
  • React Transition Group
  • React-Motion
  • React Move

In the end I decided to go with react-spring – one of the reasons was because there were already a few examples over at

Implementing react-spring

Getting started with react spring for basic use cases is quite easy – Install it via NPM:

npm install react-spring

After that I just imported it, created the animation-configuration and wrapped the animated elements into a <animated.div />:

import { useSpring, animated } from 'react-spring'


const props = useSpring({ opacity: 1, from: { opacity: 0 } })
<animated.div style={props}>



To edit the transition speed some configuration like this is needed:

const props = useSpring({ opacity: 1, from: { opacity: 0 }, config: { duration: 2000} })

That’s already it? Unfortunately not. I had to realize that all the changes on the <Switch> element (which is used to switch between all the pages on the site) wouldn’t be affected, so we would have only achieved one of the two use cases I wanted to implemented with animations


To achieve the animations on Links we would need to implement it, with use-tranisition. Over at the documention it is described as the following:

“An animated TransitionGroup. Feed it your items, keys (which can be null if items are atomic), and lifecycles. Whenever items are added or removed, it will animate these changes.”

The Implementation would look like this, where the router link is used as key and we need a Absolute box (because otherwise all the box elements could be displayed as smoothly):

But now when clicking on the Links, the Pages would not load an the console would prompt a “Uncaught TypeError: Cannot read property ‘map’ of undefined”

Solution: As we were already querying the data from the state before the Switch, we wouldn’t need to do that in the corresponding components. The Problem was fixed with doing the following things:

  • Pass the data to the component using data={data}
  • Consume the passed values, and remove the State-Query:

That’s it – now my site was using the animations correctly 🎉

Sources that helped to achieve this:

Build with Frontity and hosted on Vercel