How to Make a Text Gooey Morph Effect Using SVG filters feGaussianBlur and feColorMatrix. All inside a Next.js application and animated with Framer Motion.

Live demo / Source code:
https://blog.olivierlarose.com/tutori...

To find out more on how to make this animation, you can check these links, they greatly helped me understand this animation:

https://codepen.io/supah/pen/abVGjVq
https://www.studiogusto.com/studio
https://frontend.horse/articles/gooey...

00:00 Intro
00:51 Overall concept
1:41 Rendering one SVG number
2:50 Rendering the circles
4:43 Animating along an SVG path
8:36 Adding the SVG filters
17:29 Adding multiple numbers
19:07 Adding a controller
20:43 Outro

More animations: https://blog.olivierlarose.com/
Follow me on Twitter:   / olivierlarose_  
Discord Channel:   / discord  

Thanks for watching!

#react #nextjs #awwwards #gsap #framer #motion