Smooth Loading Transitions with Framer Motion | AnimateSharedLayout

Hey guys! Hope you have all had a great time so far. I've been on a long break and coming back with some heat for this episode! Hope you enjoy :)

Code FIles:
https://github.com/wrongakram/pageloader

Preview:
https://pageloader-3cf2b.web.app/

Written Tutorial:
https://www.notion.so/Framer-motion-A...

Framer Motion:
https://www.framer.com/api/motion/

Dribbble post used:
https://dribbble.com/shots/15317840-c...


▬ Timestamps  ▬▬▬▬▬▬▬▬▬▬

0:00 - Intro
1:30 - Project Breakdown
3:25 - Framer Motion Basics
5:40 - Loader Animations
14:40 - Banner Animations

#FramerMotion #React #WebAnimations

Social Links:
Twitter: wrongakram
https://github.com/wrongakram
https://dribbble.com/wrongakram

New to the channel?
Hey there my name is Akram, I am a Front end developer and UI Designer. I'm here to hopefully educate people on how to code projects that actually look good. My stack mainly consist of react.js and node.js. For UI design I like to use adobe XD as my go to. If you have any suggestions on tutorials you would like to see feel free to DM me :)

• #education
• #website
• #build_website
• #javascript
• #reactjs
• #react
• #sass
• #github
• #code
• #css
• #jsx
• #design_to_code
• #design
• #ui
• #ux
• #awwwards
• #dribbble
• #gsap
• #javascript_animations
• #responsive
• #gatsby
• #html
• #scss
• #cursor_animations
• #js
• #parceljs
• #parcel_bundler
• #animejs
• #xstate
• #anime
• #animations
• #parcel
• #framer_motion
• #page_transition
• #web_animations
• #framer