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?

9 Comments

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

Peter Gr

feedLayer = screenshot of twitter feed
whiteLayer = white screen-sized layer, beneath blueLayer
blueLayer = Blue PNG with bird shape emptied out

feedLayer.scale = 0.7 (not visible yet)

blueLayer.animate
--properties:
----scale: 10 (or however much)
--time: 0.7 (or however long)
--curve: "ease-in"

whiteLayer.animate .... (set opacity to 0, set the time duration etc.)

feedLayer.animate (set scale to 1, use a spring curve to make it expand past 1 and then ease back)

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: https://framer.cloud/IWlvB/ (it's also all vector)

Rohan K

Aaron Brako i remember you were looking for something like this

Read the entire post on Facebook