Wave Effect On Scroll
Hey guys,
How can I create the wave effect like this https://www.newformcap.com/ on Webflow, tried a cloanable but it has some glitch.
I want it to have the same behavior as the link when the user scroll two sections.
Any ideas? @Web Bae
Home | New Form
Advancing the economic networks of the future
4 Replies
hey @Mustapha Mushi you should be able to achieve this with the principles in this video: https://www.youtube.com/watch?v=XrBlDhLX58s&t=46s
Web Bae
YouTube
Animated Curvy SVG Section on Scroll
Is there anything that GSAP cannot animate? In this video I'll show you how to make curvy section transitions with SVG in Figma and how to animate them on scroll by tweening the SVG path d attribute.
// GSAP DISCOUNT
🧦 Code WEBBAE10 gets you 10% off
// CLONE IT (affiliate link)
👯♂️ https://webflow.grsm.io/cloneable-is-bae?sub1=animated-curv...
you'll need to detect scroll "velocity" though and animate the svg point based on that velocity.
Digging a little more I saw some of the other effects going on which probably requires a bit more actually.
I'm not 100% sure how they are doing it! It's cool though
there is a lot of clip-path going on here though
Hey @Mustapha Mushi ,
I believe the scroll and mouse hover effects on the website you referenced are made using WebGL.