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?
I imagine it would be quite simple, just animate the scale of the logo
The tricky part is the masking, probably can be done using SVG masks.
Scale and opacity?
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
feedLayer = screenshot of twitter feedwhiteLayer = white screen-sized layer, beneath blueLayerblueLayer = 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)
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?
Not sure if this video is going through? Whipped up something using Sketch layers.
here's an example using a CSS Mask, which can be animated with CSS: https://framer.cloud/IWlvB/ (it's also all vector)
Aaron Brako i remember you were looking for something like this