Animations for your GatsbyJS site with Pose

GatsbyJS static site generator is awesome for creating super fast sites. With full performance setup your pages should load straight away.

Sometimes you need a bit of animation to make the site that little bit more interesting and with Pose we can do exactly that.

In this example I’m going to use a basic template that GatsbyJS provides with the Kaldi theme. It provides us with a few pages including a blog and a couple of forms. It’s basically a fully responsive website that we can add some animations to.

First we need to install pose to our site with

yarn add react-pose

or

npm install react-pose --save

We’ll need to import Pose for each component that we want to add animations to with import posed from 'react-pose';

We can use posed to create any animated HTML or SVG element, here we’ll use it to create a div.

Then in the render we include the Box element we just created. We’ll wrap each blog post within this Box

Next up is adding the animation to the box we created:

This will increase the scale of the box when hovered. It’s a pretty simple and neat example of how we can quickly add a hover effect to our elements in a static website.

One example on the Pose documentation shows how we can zoom into an image on click and zoom back out again when the image is clicked again. This seems like a nice light and simple alternative to a lightbox.

We’ll make a new component called ImageZoom that uses the PreviewCompatibleImage component that came with the gatsby-starter.

We need to import posed again, define our animated posed.div to create our new Zoomable div.

We’re going to use state to control when the image is zoomed in or not so we’ll set the active state.

We can wrap our new Zoomable item around the image with the pose settings and onClick function.

And set up our functions for swapping the state when our Zoomable item is clicked.

Now that our new component is ready to use, let’s import it into the products page and use this instead of the PreviewCompatibleImage.

Related posts:

You search for knowledge Ignorance is infinite Your quest eternal. “Untitled Haiku 62” is published by Aide Ojigbede in Poets Unlimited.

I keep on lying to myself that I will sit and read (or finish) a book (one of many) next to, piled up, adjacent or near my bed or, often, near at hand. My excuses are rare; distraction, a more…