How was the animated ribbon and circle done on this page?

This site was linked to in a Webflow mailout recently https://centim.webflow.io/ It’s got some pretty great looking animated effects on it (the ribbon and the expanding circles on the home page) which I wanted to find out more about, and I no longer have the Webflow mailout. Does anybody know how it was done?

Cheers
Grant

To create such ribbon animation you have to first create it as a Lottie and then using Webflow Interaction you can animate it using While scrolling in view

For the expanding circle, we can create rounded DIVs with no background but border. Positioning is little tricky you’ve to play a little with it but position: fixed will work on similar case.

For the circle you can just create an SVG as well and use that instead.

Thanks for your reply Abi.

Yes, I am aware of the Lottie approach, but I was pretty sure that this site was using something new. There doesn’t appear to be any evidence of Lottie in use on the site.

Grant

They seems to be using unique implementation. If it is not using Lottie interaction then it should be just the Webflow Interaction because those masking elements are only being moved (translated) in X Y axis.

I may not be 100% about it but I did observed the implementation. I went to check the code again and it is using SVG but I didn’t see any custom code.

And I can see the class names of those SVG elements created separately so this should be true that they are using Webflow Interaction to create those animations.

Hey Grant, great to see you at the Auckland meetup.
This example is a template you can purchase, so if you haven’t seen the designer link yet you can find it here-

I would have guessed a Lottie also, but it looks like an SVG using some form of interactions-driven masking technique. That seems incredibly over-complex for the goal, so I can’t guess why they took this approach.

No code though… templates can’t include code.

https://preview.webflow.com/preview/centim?utm_medium=preview_link&utm_source=designer&utm_content=centim&preview=a4cce5568330192b87c1fb66f5713a54

1 Like

Hahah I was wondering about the designer preview link and forgot that we can view project preview of templates.

Thank you for the input.

1 Like