https://github.com/kentcdodds/epic-stack-with-framer-motion

Using client hints to avoid content layout shift with prefers-reduced-motion and framer motion animations.
https://github.com/kentcdodds/epic-stack-with-framer-motion

epic-stack epic-stack-example

Last synced: 7 months ago
JSON representation

Using client hints to avoid content layout shift with prefers-reduced-motion and framer motion animations.

• Host: GitHub
• URL: https://github.com/kentcdodds/epic-stack-with-framer-motion
• Owner: kentcdodds
• Created: 2023-06-02T22:35:54.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-06-02T22:36:37.000Z (almost 3 years ago)
• Last Synced: 2025-07-23T06:45:26.609Z (9 months ago)
• Topics: epic-stack, epic-stack-example
• Language: TypeScript
• Homepage:
• Size: 3.21 MB
• Stars: 24
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Epic Stack Example with Framer Motion

This demonstrates how to use Framer Motion with the Epic Stack. Easiest way to

explore this is to check the commit history to see what changed from the `init`

commit.

Pretty much:

1. Install `framer-motion`

2. Add a client hint for `prefers-reduced-motion`

3. Use framer motion with `reducedMotion` to respect user preferences, even on

   the server render.