Animated Sections
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
Wrap Root Element gatsby browser
Wrap Page Element gatsby ssr
Animated Sections Code
Using framer motion useInView
Typescript with subFeatures
Using only the needed sub-features of Framer Motion, “tree shaking”, at: Reduce bundle size
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)