Animated Sections with Framer Motion for React / Gatsby Animated Sections.
This is super easy but you will have to go through all your,
.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
.js page and / or components.
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.
Using only the needed sub-features of Framer Motion, “tree shaking”, at: Reduce bundle size
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)