Flow - Now with Lottie & Animated SVGs - Ship beautiful UI Animations. | Product Hunt Embed
layers

Tags icon

Working with Layers

Every element of your animation has its own layer. Learn to work with layers, and all the layer properties to animate your Sketch designs.

Moving Layers

You can move a layer by dragging it around the stage, or by changing its position from the properties panel.

Backgrounds

One of the key concepts with layers is that they all have a background. Typically, for any content that fills the layer (e.g. images) you won’t see it, but for anything else, like text or odd shapes you will. It’s pretty easy to change the color of the background.

backgroundShape
The pink fill is the background of the circle
backgroundText
The light blue fill is the background of the text layer.

Since images fill their frames, you won’t see the background color.

Borders

Every layer has a border whose line is drawn its center – a 10pt line will be drawn 5pts equally outwards and inwards from the frame of the layer.

borderShape
Border around a shape.
borderText
Border around some text.
borderImage
Border on an image.

Border Radius

You can tweak the corner radius of borders. Any value you apply to the radius will be made equally across all corners of the layer.

borderRadius
Animating the border radius on an image.
On iOS, use the .clipsToBounds property to mask the layer at the edges of its border.

Opacity

You can easily adjust the opacity of a layer, which changes all the elements of that layer including its background and border.

opacity
Opacity applies to the sublayers of a group.
opacityLayers
You can also animate individual layers.

Flipping

You can flip the contents of a layer vertically and horizontally, or both.

flipping
Flipping is non-animatable.

Rotations

You can easily animate the rotation of a layer. Layers will rotate around their anchor point, which by default is the center of the layer.

rotations
Rotating some shapes.

Anchor Points

You can change the point around which a layer rotates by setting its anchor point.

anchorPoint1
Rotating around {0,0}, {0.5, 0.5} {1,1}.

Anchor points are measured in normalized coordinates to the width and height of a layer. The center of a layer is always {0.5, 0.5}, whereas the top-left is {0,0} and the bottom-right is {1,1}.

So, if you wanted to rotate a 100x100 layer with its anchor point in the vertical middle of the shape and 200 points the left you would use {-2.0, 0.5}. 

A lovely trick is to edit the anchor point’s keyvalue. Doing this will allow you set the point to some non-standard position so that the layer rotates around a point outside itself.

anchorPoint2
Rotating around {0.5,0.5}, {0.5, 1}, {0.5,2.0}, {0.5,4.0}.

Shadows

Every layer can have a shadow. Set the shadow by adjusting its color, opacity, offset and radius.

shadows
You can easily animate the shadow of any layer.

Groups

In Flow, we treat groups as a special kind of layer that has sublayers. Like any other tool on earth, press CMD+G to make a group of selected layers, or CMD+SHIFT+G to ungroup.

nongrouped
Here are 3 layers moving, ungrouped.

If you have already animated a layer, we’re going to try to preserve it’s motion after grouping.

grouped
After grouping, the layers move exactly as before.
If you do nothing to the group, it preserves the frame size that contains all its layers.

If you move a group, the layers’ motion will appear to cascade.

groupsMoving
Moving the group by 300pt, now the group's frame updates.

Resizing Constraints

If you’ve added resizing constraints to your layers in Sketch you’ll see they carry over to Flow.

resizing
Stretching a group with two layers using constraints.
The layout effect of resizing may differ slightly from that of Sketch.
background Made with Flow.
underscore Made with Flow.
line2 Made with Flow.
line1 Made with Flow.
circle Made with Flow.
hit Made with Flow.

result(s) found for “”.