Unleash your design dreams ✨ Learn about the new editor

Latest version: *.*.*

Buy now

Help center

/

Editor tour

/

Animation Mode Tour

Animation Mode Tour

In Animation Mode you can add and edit animations for your layers. Let’s run through how the SR7 animation system works in this tour.

Animation Mode

Animation Mode can be activated by clicking the animation mode icon 1 in the Right Sidebar ->.

Switching into Animation Mode also automatically opens the Timeline ->, and vice versa.

When in Animation Mode you are always working on:

Be sure to check the timeline’s Scene Switcher and selected Track & Keyframe to confirm you are working on the desired target for animation.

Animation Mode is split into two sub-modes: Preset Mode and Advanced Mode.

Preset Mode lets you instantly apply premade animations from a large collection.

Advanced Mode lets you create custom animations or modify those added via presets.

Click the Preset Mode 1 or Advanced Mode 2 button at the bottom of the Animation Mode panel to switch between the two sub-modes.

Preset Mode

The Preset Mode panel is organized into a collection of categories. Each category can be expanded to show its subcategories.

Hovering over the sub-categories reveals the presets within, and hovering over a preset opens a small demonstration of the animation 1.

Clicking the preset applies it to the currently selected layer.

If you are curious to see the settings that were applied by the preset, you can optionally then switch into Advanced Mode.

Preset Categories

There are 10 categories of animation presets to choose from:

Basic Presets

The Basic category contains a Fade sub-category.

Inside the Fade sub-category, the Noanim preset removes all animation effects.

The Light, Middle and Strong presets apply increasingly rapid fade animations.

Lines Presets

The Lines category of presets can be applied to Text layers, and allows you to animate each individual line in the text, one at a time.

Lines can be set to fade in, fly in from random directions, flip, slide, cycle or pop in.

Words Presets

The Words category of presets can be applied to Text layers, and allows you to animate each individual word in the text, one at a time.

Words can be set to fade in, fly in from random directions, flip, slide, cycle, pop in or split up and reveal.

Letter Presets

The Letter category of presets can be applied to Text layers, allows you to animate each individual letter in the text, one at a time.

Letters can fade in, fly in from random directions, flip, cycle or pop in.

Slide Presets

The Slide category of presets adds a sliding motion to layers.

Layers can slide a short or long distance, be thrown with a bounce, or slide diagonally.

Skew Presets

The Skew category of presets adds a simultaneous skewing and sliding motion to layers.

Layers can skew and slide a short distance, long distance, or be thrown with a bounce.

Rotate Presets

The Rotate category of presets adds various circular motions to layers.

Layers can be rotated with a smashing motion, flipped quickly or turned slowly.

Zoom Presets

The Zoom category of presets zooms layers in or out.

Masked Presets

The Masked category of presets partially hide a layer via masking as it is revealed.

Layers can zoom within their frames, slide or glide in to be revealed, be uncovered while staying still, rotate into frame, or transition in with a colored block.

Loops Presets

The Loops category of presets contains a collection of animations that will repeatedly loop.

Choose the No Loop preset to remove any previously added loop animations.

Layers can loop with a pendulum swing, an orbit around the stage, up and down in a wave, a 3D wriggling motion, spinning, hoovering, pulsing or applying filters.

Advanced Mode

The Advanced Mode panel always has the same essential section structure:

  • Animation Targets 1: Directly target a specific type of layer animation, e.g. Mask, Words, Wrapper.
  • Keyframes 2: Add, remove and switch between Keyframes.
  • Timing and Flow 3: Visible on the Layer target when an Anim To keyframe is selected. Set duration and easing.
  • Target section 4: Configure animation targets. Labeled to match target name, e.g. Layer, Mask, Words, Wrapper.

Animation Targets Section

In the Animation Targets section you can add specialized targets that let you animate different aspects of a single layer independently. For example, adding a Lines target to a text layer lets you animate each line of text individually.

Every layer starts with a Layer target for animating the whole layer. You can also add these 8 optional targets:

Click the Add button 1 to choose an animation target from the list 2.

To delete an animation target, select it then click the delete button in the top right corner 1.

Once an animation target is added, click its icon to activate its corresponding target section and configure its settings.

Keyframes Section

In the Keyframes section you can click a keyframe to activate it for editing, add a keyframe by hovering and clicking the + flag 1, and rename a keyframe by double clicking its title. You can also toggle keyframe looping 2.

Deleting a custom keyframe is done by selecting the Layer target and clicking REMOVE FRAME in the top right of the Timing and Flow section 3.

Timing and Flow Section

The Timing and Flow section 1 is visible when the Layer animation target and any Anim To keyframe are selected 2. Here you can set the keyframe’s duration and easing.

Target Section

Each Animation Target has a corresponding section containing its settings. It is labelled to match the target name, e.g. the Layer target’s settings are in the Layer panel, the Mask target’s settings are in the Mask panel.

Some settings have input helper panels that appear when you click them. These helpers are designed to help configure common inputs, such as random ranges or cycling values, with just a few clicks.

Layer Target

In the Layer target panel you can set the keyframe’s opacity, position, scale, skew, 3D transform and colors.

Mask Target

Use the Mask target to animate simple rectangular layer mask.

In the Mask target panel you can set position of the mask, whether overflow should be hidden, a block overlay animation direction, and overlay color.

Clip Target

Use the Clip target to animate more sophisticated rectangular or circular clipping masks.

In the Clip target panel you can set the shape of the clipping mask, its direction and its size.

Chars Target

Use the Chars target on a text layer to animate by character.

In the Chars target panel you can set how the characters should animate their opacity, position, scale, skew, 3D transform and any filters i.e. blur, monochrome and luminosity.

Words Target

Use the Words target on a text layer to animate by words.

In the Words target panel you can set how the words animate their opacity, position, scale, skew, 3D transform and any filters (blur, monochrome and luminosity).

Lines Target

Use the Lines target on a text layer to animate by line-by-line.

In the Lines target panel you can set how the lines should animate their opacity, position, scale, skew, 3D transform and any filters (blur, monochrome and luminosity).

PanZoom Target

Use the PanZoom target to animate position, scale and rotation.

Filter Target

Use the Filter target to animate layer and backdrop filters.

In the Filter target panel you can set blur, monochrome and luminosity filters on the layer, and you can set blur, monochrome, luminosity, sepia, inverted and contrast filters on the backdrop.

Wrapper Target

Use the Wrapper target to animate a layer wrapper’s movement, e.g. following motion paths.

In the Wrapper target panel you can set the wrapper’s position, scale, skew, 3D transform and filters.

You can also switch the Motion Type from XYZ to Motion Path, then click the Edit Motion Path button.

This switches the Wrapper panel into motion path editing mode, which can be exited by clicking Motion Path Done.

While motion path editing mode is active, you can create vector based motion paths on the Stage, and the layer will animate along that path.

Track Splitting

Some Animation Targets can be split onto their own tracks -> on the timeline. Additionally, some individual attributes of an Animation Target can be split onto their own timeline tracks as well.

A split track gives an Animation Target or attribute its own keyframes that can be configured independently. For example, this layer has a dedicated track for the Wrapper target, and below that another separate track for the wrapper’s X attribute.

If an animation target can be track split, a split/merge button will be visible at the top right of the Keyframes section.

If an attribute can be track split, a split/merge button will be visible at the top right of its input helper.

Toggling this button splits an animation target or attribute onto its own track, or merges it back into the main parent track. The button is colored purple when a track is split.

In this article

back to overview