Wave animation on scroll

[Louise Dennevi]

Hi!

 

I'm new here so bear with me ☺️ 

 

I want to create a animation where it feels like its kind of wavy (don't know how to describe it the best way) when scrolling down the page. I want to do it like on this website (the orange part). So I'm just wondering if anyone here has got a similar Codepen or something I could use to modify or maybe give me some tips & tricks how I should think?  Appreciate all the help I can get ?  

 

Thank you in advance! 

/cheers from Sweden

[tailbreezy]

Hello Louise,

 

 

It can easily done with SVG and morphSVG. You can also do it more programmatically as in the examples below.

Check these out. 

 

https://greensock.com/forums/topic/17845-melting-background-animation/?tab=comments#comment-81397

See the Pen BYwgBg by osublake (@osublake) on CodePen.

[Louise Dennevi]

4 minutes ago, tailbreezy said:

Hello Louise,

 

Check these out. 

It can easily done with SVG and morphSVG. You can do it more programmatically as in the examples below.

 

https://greensock.com/forums/topic/17845-melting-background-animation/?tab=comments#comment-81397

 

See the Pen

See the Pen BYwgBg by osublake (@osublake) on CodePen.

by osublake (@osublake) on CodePen

 

 

Oh that's perfect. Thank you so much, and thanks for the quick reply!

[ZachSaucier]

The animation on that website uses WebGL to to give it that sort of effect. But MorphSVG is a great way to make a more simple version of it  

[PointC]

Just FYI. Creating vectors for organic morphing in Adobe Illustrator can sometimes produce less than desirable results. I have an article about how to work around AI's 'helpfulness'. 

 

https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

 

Happy tweening.

[Louise Dennevi]

@PointC @ZachSaucier thank you so much for your tips. I really appreciate it! I will look more into MorphSVG and read the article you sent ?