🟣 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
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
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.
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.
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.
Here are the animations in action on my new website.
❓ What are your thoughts on these animations? Will you implement these on your website?
📚 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. 😄
🔗 Links in this Tweet:
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