Streaming live at 10am (PST)

Applying an alpha matte

I would like to use a round shape as a mask on my div.

The term from graphic design or animation is “alpha/luma matte”.
It’s when you’re taking a shape, applying it on your image and telling the programme to use the shape as a cropping mask, basically what’s not inside/under this shape will be cut out.

This example gif shows how alpha matte works:

I would like to create a mask of a circle, that’s animated to scale up and attach its animation value to the scrolling, then use this circle as a mask for a div.
My aim is to create this effect:

By scrolling, the use reveals the other style on top of the existing one.

Would this be possible to execute with Webflow?

Many thanks to all helpers :upside_down_face:


Here is my public share link: LINK
(how to access public share link)