Share Posted February 24, 2021 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 More sharing options...
Share Posted February 24, 2021 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 5 Link to comment Share on other sites More sharing options...
Author Share Posted February 24, 2021 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 More sharing options...
Share Posted February 24, 2021 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 3 Link to comment Share on other sites More sharing options...
Share Posted February 24, 2021 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. 3 Link to comment Share on other sites More sharing options...
Author Share Posted February 25, 2021 @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 😄 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now