Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Louise Dennevi

Wave animation on scroll

Recommended Posts

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 :) 

  • Like 3
Link to comment
Share on other sites

@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 😄

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×