๐ŸŸฃ Making Page Transitions with @framer motion and @GatsbyJS ๐ŸŸฃ

Thread By @MrConerMurphy

๐ŸŸฃ Making Page Transitions with @framer motion and @GatsbyJS ๐ŸŸฃ

I have been redesigning my website lately and a key feature I've added is page transitions using Framer Motion.

These animations have aided in improved the UI/UX of the site.

Let's check out how to do it. ๐Ÿงต 1/8

var _excluded = ["components"];

function _extends

18/05/2021 15:29

1๏ธโƒฃ Animate Presence

For page transition animations we will make use of the Animate Presence Component provided by Framer Motion.

This component will keep track of and control the animations of elements leaving the page.

This means we can animate pages when they change... 2/8

var _excluded = ["components"];

function _extends

18/05/2021 15:29

To ensure our animations are a success we need Animate Presence to be loaded on every page and not removed from the tree. This allows it to keep track of all elements under it.

To achieve this we use the wrapPageElement API in gatsby-browser.js to wrap every page.

3/8

18/05/2021 15:29

2๏ธโƒฃ exitBeforeEnter

To allow for the exiting component to complete its animation before the entering component starts we need to add the prop exitBeforeEnter to the Animate Presence component.

This prevents the incoming element from overlapping the existing one.

4/8

18/05/2021 15:29

3๏ธโƒฃ Page Element

The final piece of the puzzle is adding the actual animations to the page element.

On my website, every page get's rendered through a Layout component, this allows me to just add the animations to the wrapping element of the page.

5/8

var _excluded = ["components"];

function _extends

18/05/2021 15:29

โญ Example

Here are the animations in action on my new website.

โ“ What are your thoughts on these animations? Will you implement these on your website?

6/8

18/05/2021 15:29

๐Ÿ“š Read More:

๐Ÿ”— ๐Ÿ”— ๐Ÿ”—

โ“ Got any questions? If so, be sure to drop them below or send them to me in a DM and I'll be happy to help. ๐Ÿ˜„

7/8

๐Ÿ”— Links in this Tweet:

18/05/2021 15:29

Did you enjoy this thread? If so please consider doing one of the below to show your support:

โค๏ธ Like these tweets ๐Ÿ”„ Retweet the first tweet in this thread so others can see it. ๐Ÿ‘ค Follow me for more content like this. 8/8

18/05/2021 15:29

Email Newsletter

Want to get weekly notifications of my posts and more exclusive content?

Please consider signing up to my email newsletter.