How is this effect done, and is it possible in Webflow?

Many of this images on this website are revealed using a ‘brush stroke’ effect.

After a quick dive into the code, the hero image is a video, but for everything else it looks they are using some sort of animated gif masking the image, does that sound about right?

Also, would something like this be possible in Webflow?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @jonwright,
it is of course possible to achieve this effect in webflow. From having inspected the source code, it looks like they are using two images. One image with the full picture and another image with a gif picture having this white strock being animated with a transparent background. The gif picture is placed on top of the full picture to get the effect.

You could reproduce the same effect, using webflow scroll into view interractions to play around with the opacity of the full picture and gif one.

Great, that makes perfect sense, thanks Anthony.

1 Like