Learn Framer Motion: Shuffle animation with CSS Grid and Flexbox Layouts
You will learn how to create shuffle animations with CSS grid and Flexbox layouts using Framer Motions layout and AnimatePresence properties.
source code: https://github.com/ui-code-tv/framer-...
Image links used in Tutorial:
https://raw.githubusercontent.com/ui-...
https://raw.githubusercontent.com/ui-...
https://raw.githubusercontent.com/ui-...
Other Videos on framer :
On-scroll and staggered animation: • Learn Framer Motion: Build a complex ...
Intro (00:0:00)
What you will learn (00:2:05)
Project setup and code walkthrough (00:3:06)
Basic animation setup (00:12:58)
Add functionality, animate with layout property on Flexbox (00:17:19)
Remove functionality, animate with animatePresence property (00:26:18)
CSS Grid animation setup (00:34:12)
Shuffle functionality, animate CSS grid (00:39:26)