How to recreate a circular scroll-expand transition in Wix Studio?

Ask the community
,
1

Hi,

I’m looking to recreate a smooth scroll interaction on my site, similar to the example shown in the attached screenshots (from fold7)

What the effect does:

  1. As you scroll down from the top section, the page pins/locks in place.

  2. A circle element appears at the bottom and continuously scales/grows larger based on scroll progress.

  3. The circle expands to completely cover the screen, creating a seamless visual transition into the next dark-themed section.

Artboard 1
Artboard 1596×842 26.4 KB

Artboard 1_1
Artboard 1_1596×842 63.4 KB

Can this exact pinning + scaling effect be built using native Wix Studio Scroll Interactions? If so can someone give me a mini tutorial to help me please!!

Thanks in advance for any insights or suggestions!

2

yes this is possible using Studio animations.

There is a similar design on the Wix site which should give you the basics on how to do it.