Streaming live at 10am (PST)

Background animation interaction


#1

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!


#2

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 https://github.com/imakewebthings/waypoints

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.


#3

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