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
Here is my public share link: LINK
(how to access public share link)