How to Make a Split Vignette Effect using Framer Motion and Nextjs

Published: 16 August 2023
on channel: Olivier Larose

9,047

410

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

Watch video How to Make a Split Vignette Effect using Framer Motion and Nextjs online without registration, duration hours minute second in high quality. This video was added by user Olivier Larose 16 August 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 9,047 once and liked it 410 people.

1,651