Marketplace
Made in Webflow

Mask Animation (like 1.1.1.1)

2123 views
site profile thumbnail

Description

I saw a post on reddit about how to achieve the header effect on https://1.1.1.1/ so I decided I would give it a shot in Webflow. I just created the mask (can be done in what ever image/vector editor you use), layered it using z-index, animated the background (which is inside a div with no overflow), then finally I added an outline to the mask just to keep the background from peaking out if a page doesn't respond the perfectly. I hope you guys find this useful! You can get super creative with the background to create all sorts of effects. It doesn't have to just be lettering. Plus, by doing it this way your animation can be responsive to your page/element interactions.
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.

We miss comments too!

Right now, Made in Webflow doesn't offer all of the same functionality that Showcase did, like the ability to leave comments. But don't worry: We're working to bring comments back as soon as possible!

As always, we'd love to hear your feedback! Click the link below to take a short survey about Made in Webflow.

animationinteraction

More by Dylan Norman

See profile
View details
dazzle.studio style site.
18
17