1. Create design in top-level frame

In the push animation in the previous section, we had you created all the frames before adding design elements to each.

With smart animate, we recommend creating the first frame, adding design elements, then duplicating to use as the starting point for following frames. We find this the simplest way to ensure layer matching is correctly applied, and most intuitive way to add motion, since the modified properties will represent the end state of that step in the animation.

Create design elements

In our design, we created a grid of nested frames and added images to each. We also created the overlay panel for the text and logo elements. The following video illustrates this process.

Note: Make sure constraints are set to "Scale" for each image, row, and column so dimensions will scale proportionally when modified.

Combine in top-level frame

Create a new top-level frame and add the grid and overlay elements.

Note: Make sure "clip content" is set on the frame to hide the grid elements that are out of viewport.

Duplicate as starting point for following frames

Layers will automatically match since layer name, parent layer names, and hierarchy will be identical.

Modify layer properties to animate

Here, we modified the rotation, size, and Y position of the grid frames to create the scrolling effect. See the design file for the final result.