This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Chris Camargo
Posted Mar 07 - Read on Facebook

In thinking about animation and complex masks, I came back to the Twitter intro animation.

How would you go about recreating this transition in Framer?


Daniel Caine

I imagine it would be quite simple, just animate the scale of the logo

Fran Pérez

The tricky part is the masking, probably can be done using SVG masks.

Bruno Silva

Scale and opacity?

George Kedenburg III

you could get more clever and have a big blue PNG with the bird punched out of it, and scale that over top your layers

Chris Camargo

George nailed this one! But, what if my background wasn't a solid color, and instead was an image, or a gradient, or other Framer layers, which I want to remain in place?

Stephen Crowley

Not sure if this video is going through? Whipped up something using Sketch layers.

Johannes Eckert

here's an example using a CSS Mask, which can be animated with CSS: (it's also all vector)

Rohan K

Aaron Brako i remember you were looking for something like this

Read the entire post on Facebook