Trying To Recreate Cascading Asymmetric Shapes

Design help Animations & Interactions
1

Hello,

For context I’m still super new to Webflow and have recently begun learning animations.

For a personal challenge, I’m trying to re-create this landing page I found: https://alexevlakhov.ru/

My assumption is that I can recreate this way smoother on Webflow. I started messing with the concept here: https://preview.webflow.com/preview/shape-cascading?utm_medium=preview_link&utm_source=dashboard&utm_content=shape-cascading&preview=07057d55e5fd961dc0befcb1c596768f&workflow=preview

I’m just trying to figure out how to get started on this. Three questions:

  1. My question is does anyone know of a page build like this on Webflow already that I can take a look under the hood?

  2. Can you create asymmetric shapes natively (like on the link above) on Webflow or should I just export the SVGs I make on Adobe Illustrator/Figma?

  3. Any ideas on how you would approach/tackle this?

Thank You!

2

Hi @jordan_l

You can create a similar animation, but you’ll need to create shapes in a graphics program. But yeah it’s possible. I have a few similar on my portfolio. Here’s one page: Gary Michael Design | Your First Steps

To be honest, there’s nothing on the market that will do what Webflow does in terms of framework, CSS, interactions, CMS, hosting, etc… all in one. Normally, we have to combine this functionality. You’re in the right place!

-G.J.