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