Creating scroll animations with Framer Motion

By rebuilding part of CodeSandbox Project's page

NOTE: I am NOT affiliated with CodeSandbox, but do think their website is an amazing showcase of Framer Motion's capabilities and a great example for other people to learn from. All of the svg's in /public are owned by CodeSandbox as well as all of the icons in /src/icons, they are only used as teaching material here.

Links

• 🔗 Visit the preview of what we build here.
• 📺 Link to the video
• 📺 Link to the gradients video
• 📺 Link to the avatar animation video
• 🥡 CodeSandbox' version

Running this project

Run yarn or npm i to install the project. Next run yarn dev or npm run dev to view the project by clicking the link in the terminal.

Project structure

• The homepage is located in src/pages/index.tsx
• All animated sections can be found in src/sections
• Page with gradients can be found in /src/pages/gradientssss or in your browser at /gradientssss.

Design remains copyrighted by CodeSandbox, it can only be used for educational purposes.

See the LICENSE for more information about reusing this code.