How to Morph an SVG using Framer Motion, Flubber.js and Nextjs

A tutorial that takes a look at using Framer Motion mixer with Flubber.js to create an SVG Morph animation, inside of a Next js project.
Demo / Source code: blog.olivierlarose.com/tutori...
00:00 Intro
00:46 Preparing the SVGs
2:23 Flubber js (vanilla)
4:00 Framer Motion with Flubber js
10:04 Smiley face
More animations: blog.olivierlarose.com/
Follow me on Twitter: / olivierlarose_
Discord Channel: / discord
Thanks for watching!
#react #nextjs #awwwards #gsap #framer #motion #svg #morph

[@wondays654]

The gift that keeps on giving. Can’t say how much this channel has helped me.

[@olivierlarose1]

Cheers🤝

[@pranavrajveer3767]

A full crash course of framer motion integrated into a next application will be highly appreciated.
You doin it good dude
Keep it up 🔥

[@olivierlarose1]

Coming soon!

[@zacmuturi4522]

Oli, if you make it today, we buy it today!! You have no idea how frustrating it is to learn framer motion from fragments onlinel

[@shaked1233]

Great as always, keep em coming Olivier!

[@olivierlarose1]

Lets goo🔥

[@devyb-cc]

great approach as always 🙌

[@olivierlarose1]

🙏thank you

[@Lysergicme]

Awesome possum, u earned a sub!

[@olivierlarose1]

Cheers mate!

[@hassaantahir3861]

Great as usual 🎉

[@olivierlarose1]

Appreciate it!

[@PleizyParagas]

Sheeesh You're the best bro! Thanks!

[@olivierlarose1]

🔥thx bro appreciate it

[@bradtramel9467]

wowwwwwww

[@overrevvv]

Really cool video.

[@olivierlarose1]

Thanks!

[@user-nr1oy8lz3l]

❤❤❤❤❤❤❤

[@charlesxavier77]

Damn this was awesome! I also was trying to find a way to morph svgs haha.
It would be grate if could make a full framer motion crash course btw. Just saying :D

[@olivierlarose1]

Hell yeah glad you liked the video💯 I’m working on a course right now

[@charlesxavier77]

your videos are amazing

[@templuismunoz]

Welcome to 1996 Macromedia Flash :D , I'm missing it

[@maigaoumar4267]

😊

[@aritrasarkar9374]

Good sh*t 🔥

[@olivierlarose1]

🔥lets go

[@mambaop8296]

dope shit>>>>>>>

[@olivierlarose1]

👊👊

[@user-cz1ph1td8g]

That's dope 🔥
Can you make a tutorial video on how to make your blog?
I really wanna know how you make the scroll for the opacity text

[@olivierlarose1]

Ok I’ll see if more people are down for a breakdown of my blog I’ll definitely make one💯

[@AntonyDesigns]

You are REALLY good, dude. I also checked your website. What CMS are you using?
I can't wait for more videos and tutorials from you.

[@olivierlarose1]

Appreciate it! I use Contentful for my blog, but I’m slowly discovering Sanity

[@IMdrummerTab]

awesome tut! but how do you connect vscode to framer?

[@danielpacheco2520]

Do you think gsap could be used instead of framer Motion? I use Angular and I try to adapt everything you teach to my stack

[@olivierlarose1]

Of course yes

[@klirmio21]

i feel so dumb to not being able to do it myself..

[@olivierlarose1]

This one is quite complicated tho I feel you

[@therealsharat]

The audio is coming only in my right ear for some reason. Anyone else?

[@olivierlarose1]

Ye there was a problem with my mic during the recording sorry about that

[@rizkyagungprasetyo8293]

true, I had to check my amp whether it was damaged or not, it turned out that the source of the problem was in the video lol

[@olivierlarose1]

😅