How to Make a React Website with Page Transitions using Framer Motion
26.4K views · 2020-12-10
UI Design
Learn how to make a simple React website with page transitions using framer motion. You can add animation effects whenever you change routes using react router. We will use react hooks and styled components to create this web design.
Timeline
0:00 What we are building
1:09 Creating React App
3:14 Creating Components
5:12 Creating Header
14:24 Creating Hero Section
26:12 Adding Animations
Source Code
https://www.codavilla.com/posts/how-to-make-a-react-website-with-page-transitions-using-framer-motion
If you want to follow me along my coding journey, be sure to subscribe :)
https://www.youtube.com/channel/UCsKsymTY_4BYR-wytLjex7A?sub_confirmation=1
Add animations to your React Website
https://youtu.be/fuaVNHW-GYE
Build a React website with Gatsby JS & GraphQL
https://youtu.be/smHhNzM5Uo4
Build a Gym website with HTML, CSS & Javascript
https://youtu.be/6wOolplgB5o
Timeline
0:00 What we are building
1:09 Creating React App
3:14 Creating Components
5:12 Creating Header
14:24 Creating Hero Section
26:12 Adding Animations
Source Code
https://www.codavilla.com/posts/how-to-make-a-react-website-with-page-transitions-using-framer-motion
If you want to follow me along my coding journey, be sure to subscribe :)
https://www.youtube.com/channel/UCsKsymTY_4BYR-wytLjex7A?sub_confirmation=1
Add animations to your React Website
https://youtu.be/fuaVNHW-GYE
Build a React website with Gatsby JS & GraphQL
https://youtu.be/smHhNzM5Uo4
Build a Gym website with HTML, CSS & Javascript
https://youtu.be/6wOolplgB5o