How to Make a Split Vignette Effect using Framer Motion and Nextjs
A split image animation using clip-path css value, animated with framer motion and Nextjs. Inspired by: https://tux.co/en/
Demo / Source code: https://blog.olivierlarose.com/tutori...
00:00 Intro
00:34 Base Layout
1:21 Vignette Layout
1:57 The issue with useState Hook
3:01 The issue with useAnimate
3:37 The solution
5:06 Fixing the position
5:53 CSS clip path
7:02 Making the animation smooth
7:55 Bonus section
8:17 Outro
More animations: https://blog.olivierlarose.com/
Follow me on Twitter: / olivierlarose_
Discord Channel: / discord
Thanks for watching!
#react #nextjs #awwwards #gsap #framer #motion #smooth #scroll
