Skip to main content
All CollectionsInteractions
Set SF Symbol Effect Action
Set SF Symbol Effect Action

An action that animates an SF Symbol icon.

Updated over a week ago

Overview

A Set SF Symbol Effect action adds motion to an icon in one of six ways: Appear, Disappear, Pulse, Bounce, Scale, or Variable Color. Each of these animation styles is native and has different properties from Apple, allowing you to customize properties like the speed, number of repetitions, and scale direction.


Action Properties

Target

Select the SF Symbol that this action will affect.

Animation

Set the animation type between Appear, Disappear, Pulse, Bounce, Scale, Variable Color, and None:

  • None: Turns off any animation effects.

  • Appear: Causes a symbol to gradually emerge into view.

  • Disappear: Causes a symbol to gradually recede out of view.

  • Pulse: Varies the opacity of a symbol over time.

  • Bounce: Briefly scales a symbol with an elastic-like movement that goes either up or down and then returns to the symbol’s initial state.

  • Scale: Changes the size of a symbol, increasing or decreasing its scale.

  • Variable Color: Incrementally varies the opacity of layers within a symbol.

Appear Animation Properties

Direction

Set how the icon animates into view:

  • Up: The icon scales up as it fades into view.

  • Down: The icon scales down as it fades into view.

Disappear Animation Properties

Direction

Set how the icon animates out of view:

  • Up: The icon scales up as it fades out of view.

  • Down: The icon scales down as it fades out of view.

Pulse Animation Properties

By Layer

Set if the full icon should animate at once or animate each layer sequentially (only applicable to some icons).

Speed

Set the speed at which the animation occurs: 0.25x, 0.5x, 1x, 1.5x, or 2x.

Repeat

Set how many times the animation should repeat. To repeat indefinitely, select "continuous" by sliding the slider all the way right.

Bounce Animation Properties

Direction

Set if the icon scales up or down from its original size as it bounces.

By Layer

Set if the full icon should animate at once or animate each layer sequentially (only applicable to some icons).

Speed

Set the speed at which the animation occurs: 0.25x, 0.5x, 1x, 1.5x, or 2x.

Repeat

Set how many times the animation should repeat. To repeat indefinitely, select "continuous" by sliding the slider all the way right.

Scale Animation Properties

Direction

Set if the icon scales up or down from its original size as it bounces.

By Layer

Set if the full icon should animate at once or animate each layer sequentially (only applicable to some icons).

Speed

Set the speed at which the animation occurs: 0.25x, 0.5x, 1x, 1.5x, or 2x.

Variable Color Animation Properties

Layer Style

Set the style in which layers animate into view:

  • Cumulative: Layers animate in and stay visible until all layers are visible.

  • Iterative: Layers animate in one at a time, with each layer disappearing as the next layer comes into view

Hide Inactive Layers

Choose to show a lower opacity version of all layers at all times (on) or only show the active layer as it animates into view.

Auto-Reverse

Set if the animation should ping pong (on) or loop (off) the layers' opacity.

Speed

Set the speed at which the animation occurs: 0.25x, 0.5x, 1x, 1.5x, or 2x.

Repeat

Set how many times the animation should repeat. To repeat indefinitely, select "continuous" by sliding the slider all the way right.


Resources

Videos

Did this answer your question?