Background animation interaction

Hi, I am not sure if I am asking in the right category. I am trying to recreate the background transition effect of this website. As well as the little tabs that indicate the sections on the left.

Can someone give me a quick summary of how the interaction is done? I am absolutely stumped at the moment. Many thanks in advance!

https://sonikpass.com/

The circle animation requires a lot of custom JavaScript coding with a <canvas>. You can’t use Webflow interactions to do this.

The background changing is detected using GitHub - imakewebthings/waypoints: Waypoints is a library that makes it easy to execute a function whenever you scroll to an element.

Manually changing the text of upper and lower container, and changing background color of global-background, and animating both container halves separately using the above library. This should give you an idea of how to do it using interactions.

This topic was automatically closed after 60 days. New replies are no longer allowed.