--- title: Add Butter Smooth Scroll-triggered Animations to your Static Website date: "March 14, 2022" description: Reveal animations are a simple but effective way to include delight in your end user’s experience. tags: ["animation", "css", "react"] draft: false --- As a frontend developer, reveal animations are a simple but effective way to include delight in your end user’s experience. It is a method of having content appear just-in-time as they scroll through your website — and with control over the entry animation, you’re able to pull off some nifty and fluid transitions between different sections. In this post, I will teach you how to add some simple reveal animations to your website, specifically with NextJS, Framer Motion and Styled Components. > You can just as easily follow along this tutorial without using styled-components. Though, I highly recommend it — it is my favourite way of writing re-usable CSS components. ### What we’re building At the end of this tutorial, you should be equipped with everything you need to add your own scroll-triggered reveal animations to your next project. Heck, you can even spruce up some of your existing websites! We will be exploring some of the basics techniques of the Framer Motion library to build our own simple website. ![full-animation.gif](/posts/full-animation.gif) #### **Intended audience** This tutorial is best suited for developers with beginner to intermediate knowledge of React, who are looking to improve the look and feel of their websites. ### Framer Motion Framer Motion is an animation library for React that feels like magic. It allows developers to easily add enter and exit animations, and animations based on some state for just about any css property. It’s API is well written and [well documented](https://www.framer.com/docs/introduction/) with tons of [examples](https://www.framer.com/docs/examples/). ![framer-intro.png](/posts/framer-intro.png) Since **v5.3**, [they have introduced](https://twitter.com/mattgperry/status/1458872361801990154?s=21) a `whileInView` prop that allows you to perform animations based on an element’s visibility in the viewport — also known as scroll-triggered animations. With this, you’re able to easily pull of transitions that would have previously required you to use some combination of react-intersection-observer and useState. ### Getting Started I have created a boilerplate repo for us to get started. Create your own fork of the [andelh/framer-motion-reveal repo](https://github.com/andelh/framer-reveal-animations). It is a NextJS app with a few standard text and image elements added for us to animate. Feel free to check out the `final` branch to see what we will be achieving at the end. The repo includes the following notable dependencies: - framer-motion - styled-components Okay now that we’re all set, let’s get started! ## It all starts with a Hero Our first section to tackle is the [Hero Section](https://www.awebco.com/blog/hero-section/). It contains just two text elements: - `Title` - an h1 element - `Copy` - a paragraph element We will add a simple entry animation to this section since these elements are seen as soon as you land on the page. To begin, turn both of the styled components into `motion` elements. Framer extends every HTML and SVG element with their own `motion` component. They work exactly like their standard counterparts but allow you to access framer’s powerful Motion API. When using `styled-components`, we can achieve this like so: {` // Standard styled elements const Title = styled.h1${"`"} font-size: 60px; font-weight: bold; ${"`"} const Copy = styled.p${"`"} margin-bottom: 25vh; ${"`"} // Framer motion styled elements const Title = styled(motion.h1)${"`"} font-size: 60px; font-weight: bold; ${"`"} const Copy = styled(motion.p)${"`"} margin-bottom: 25vh; ${"`"} `} When using HTML, you can just convert the tag to one of Framer’s replacement elements like so: {`

A Superb and Extended Title

Some copy

A Superb and Extended Title Some copy `} ### Animating the text ![header animation.gif](/posts/header-animation.gif) Now let’s add our first animation. With framer, we can do this using just the `animate` prop. Together, `initial`, `animate` and `transition` will be your bread and butter for most animations. - `initial` - describes the animations state that the component should be in when it mounts. Any CSS property can be passed into this object such as `opacity` and `backgroundColor`. - `animate` - describes to animation state that we want to transition to. By default, the _from_ part of the animation is described in the `initial` prop. from the initial. We can also use state values here to trigger different animation states. - `transition` - helps us describe how we wish to present our animation, with options for the duration, delay, easing and more. With this in mind, let’s animate our components! {` A Superb and Extended Title The most powerful MacBook Pro ever is here. With the blazing-fast M1 Pro or M1 Max chip — the first Apple silicon designed for pros — you get groundbreaking performance and amazing battery life. Add to that a stunning Liquid Retina XDR display, the best camera and audio ever in a Mac notebook, and all the ports you need. The first notebook of its kind, this MacBook Pro is a beast. `} This is nice, but we can make it better. Using the transition prop, let’s adjust the `duration` and `delay` so that the text elements appear one after the other. {` A Superb and Extended Title The most powerful MacBook Pro ever is here. With the blazing-fast M1 Pro or M1 Max chip — the first Apple silicon designed for pros — you get groundbreaking performance and amazing battery life. Add to that a stunning Liquid Retina XDR display, the best camera and audio ever in a Mac notebook, and all the ports you need. The first notebook of its kind, this MacBook Pro is a beast. `} [Easings.net](https://easings.net) is a handy website for previewing different easing values to apply to your animation. Find one you like and add it to the transition prop in an array: {` A Superb and Extended Title The most powerful MacBook Pro ever is here. With the blazing-fast M1 Pro or M1 Max chip — the first Apple silicon designed for pros — you get groundbreaking performance and amazing battery life. Add to that a stunning Liquid Retina XDR display, the best camera and audio ever in a Mac notebook, and all the ports you need. The first notebook of its kind, this MacBook Pro is a beast. `} Looking good chap! Let’s move on to the next section ## The Gallery Section First things first, we’ll convert everything in the section to motion elements. You should be a pro at this by now 😉. With this done, we can add our animations. Let’s re-use the `Title` animation properties from above for our `Heading` element. This time though, we will have some fun and utilize Framer’s `whileInView` prop. Switch out the `animate` prop for `whileInView` and now, the animation happens only when the element is in view! Scroll around the page a few times to give it a try. {` Here is a simple gallery reveal `} ### The **viewport** prop With the `whileInView` prop applied, you gain access to the `viewport` prop which lets you adjust a few things about how your animation interacts with the...viewport (_duh_). **Here are a few key props:** **`once`** : _Boolean_ If `true`, the animation described will happen every single time the element comes into view **`margin`**: _string_ A margin to add to the viewport when detecting whether the element has entered it. Useful for delaying the triggering of a viewport animation until more of the element is shown. A single value can be used to add a margin on every side, e.g. **`"200px"`**. Or, multiple values can be defined to assign a margin to each axis in the order of top/right/bottom/left, e.g. **`"0px -20px 0px 100px"`**. **`amount`**: _"some" | "all" | number_ Defaults to **`"some"`**, this option defines the amount of the element that has to intersect with the viewport in order for it to be considered within view. When using a number, 0 represents none and 1 represents all of the element. ### Animating the images ![gallery-reveal.gif](/posts/gallery-reveal.gif) To your `motion.img` element, apply the following animation settings. It’s similar to what we’ve been using before, but here we use a scale up animation for the reveal instead. It helps to give the effect of the images popping into view. Here you can play around with the `once` and `amount` props to see which results you prefer! {` //... {images.map((image, index) => (

))} ... `} ## The List Section For our list reveal, we want each item to gradually appear one after the other. To do this, we will set up something known as **[variants](https://www.framer.com/docs/animation/#variants)** in Framer. You can think of variants as a way of describing different animation states in an object, so that you can refer to them in your JSX later on. They also allow you to "_create animations that propagate throughout the DOM, and orchestrate them in a declarative way."_ Before we get started, make sure you’ve converted all the elements in this section to `motion` components. You can apply the same Heading animation from above to the `Heading` in this section (and even consider making this its own reusable component, we’ve repeated it enough times!) Next, we’ll create a variant object for the List Container and each List Item. {`const list = { visible: { opacity: 1, transition: { staggerChildren: 0.2, }, }, hidden: { opacity: 0 }, }; const item = { visible: { opacity: 1, y: 0, transition: { duration: 0.7 } }, hidden: { opacity: 0, y: 40, transition: { duration: 0.7 } }, };`} We’ve described two animation states on our objects: `hidden` and `visible`. We can load this object into the `motion` component using the `variants` prop. Once they are applied, they can then be referred to by label inside of the `initial` and `animate` props. {` {listItems.map((listItem, index) => ( A simple list item {listItem} ))} `} ### The emoji spin For our last section, we will use the `whileInView` and `transition` props to describe an animation that happens whenever the element is visible — and then plays on loop. ![shit-loop.gif](/posts/shit-loop.gif) {` 💩 `} ### Closing the curtain And that’s it! We’ve now built and seen how easy scroll-triggered animations are to implement with the Framer Motion library. Explore the different animations you can create by playing around with [easing values](https://easings.net), transitions and [orchestration](https://www.framer.com/docs/transition/#orchestration). Feel free to share your own forks of the project with me :)

Latest Posts

Add Butter Smooth Scroll-triggered Animations to your Static Website

Make React Router Navigation Feel Smoother Using CSS and Pace.js