LoginGet started — it’s free
Made in Webflow

Mask Animation (like 1.1.1.1)

1837 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.
animationinteraction

More by Dylan Norman

See profile
View details
dazzle.studio style site.
17
16
© 2022 Webflow, Inc. All rights reserved.