Animated Sections

Animated Sections with Framer Motion for Gatsby Animated Sections.

Profile picture
👋
Developed and Written by: Donald Boulton🎉 0
|
2022-10-20
1 min read

Sectionize Content

Animated Sections with Framer Motion for React / Gatsby Animated Sections.

This is super easy but you will have to go through all your, .md or .mdx page’s to Sectionize.

Fade in Animation for Gatsby AST, or MDX Markdown pages. For an Example this page or any page on this website is Sectionized.

Or Wrap any .tsx or .js page and / or components.

Animated Section Below

When adding an animated section to, AST in .md, or MDX in .mdx, markdown I like to break the sections up into 4 to 5 sentences.

Install Framer Motion

Install
bash

Wrap Root Element gatsby browser

gatsby-browser
js

Wrap Root Element gatsby ssr

gatsby-ssr
js

Animated Sections Code

Animated-Sections
js

Typescript with subFeatures

Using only the needed sub-features of Framer Motion, “tree shaking”, at: Reduce bundle size

Typescript-Animated-Sections
tsx

FramerFeatures Component

domMax Calling just the sub Features of FramerMotion when needed.

As in each component or page: as below

const loadFeatures = () => import('@/components/FramerFeatures').then(res => res.default)

subFeatures
tsx

Image or Video or Text

Proper
mdx