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
- 🥡 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.