Jump to content

Louise Dennevi

Wave animation on scroll

Moderator Tag

Recommended Posts



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.




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

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.