Creating animation annotations for custom SF Symbols

With iOS 17, SF symbols were enriched with animations, offering a set of pre-built animation types that can be applied to both system-provided existing library and custom symbols. The SF Symbols App now includes an Animation tab, which facilitates the configuration process by allowing to define the animated behavior directly within the app.

This feature is handy when dealing with customized symbols, as it allows the creation of animation behavior for specific layers or the entire symbol. Once the configuration is ready, the symbol can be exported, bringing with it all the annotations - metadata that will describe the animated setting just created - needed to use the symbolEffect() method on Xcode.

In this article, we will focus on how to set annotations using the SF Symbols app to create custom animations.

Getting familiar with the animation tab

Open the SF Symbols app and choose a symbol of your choice. For our explanation, we will rely on a custom symbol that we previously created.

To start crafting the animations, move to the animation tab inspector section. The animation tab shows a preview of the symbols, allowing you to see them animated. 

The tab content is divided into 2 primary sections:

1. Animation - where it’s possible to:
   1. Set the type of animation, play and stop the preview
   2. Configure the repetition setting
   3. Copy the configuration setting for swift
2. Layers - from which you can:
   1. Shape the symbol layer by layer and adjust the related opacity
   2. Activate the clear behind feature on specific layers
   3. Enable variable color on specific layers
   4. Set pulse - rotate option

Let’s take a closer look at what you can achieve in each section.

Set the type of animation, play and stop the preview

As you can see, the app offers a series of pre-built animated behaviors:

These include:

• appear - makes the layers of a symbol-based image appear separately or as a whole, allowing one to choose the direction in which the animation should move.
• bounce - applies a transitory scaling effect, or bounce, to the layers in a symbol-based image separately or as a whole and allows one to choose the direction the animation should move.
• scale - scales the layers in a symbol-based image separately or as a whole, allowing you to choose the direction in which the animation should move.
• wiggle - applies a shaking motion and allows to choose the direction the animation should move.
• rotate - rotates the symbol or its parts and allows to choose the direction the animation should move.
• breathe - adds a subtle pulsing effect and allows the layers to pulse if the option is activated.
• pulse - fades the opacity of some or all layers in a symbol-based image.
• variable color - replaces the opacity of variable layers in a symbol-based image in a repeatable sequence, and allows to choose the style, the behavior of inactive layers and the reversing of the animation process.
• replace - replaces the layers of one symbol-based image with those of another that can be specified and allows to choose the direction the animation should move.
• disappear - makes the layers of a symbol-based image disappear separately or as a whole, allowing one to choose the direction the animation should move.

They can be classified into 4 main groups:

• Discrete: An effect that runs from start to finish, like bounce, a one-off animation on the symbol.
• Indefinite: An effect that lasts until you remove or disable it like scale - change the scale of the symbol and keep it there indefinitely. they are effects that end only when explicitly removed
• Transition: An effect that animates a symbol in or out of visibility like appear or disappear.
• Content Transition: An effect that replaces one symbol with another symbol, or with a different configuration of itself such as the replace one.

Each of these animation types can be played and stopped using the preview feature that enables the animation so that developers can see in real-time the animation they are shaping without switching to Xcode.

Configure the repetition setting

This feature allows to configure the type of repetition which can be of type:

• Once - plays the animation once
• Repeating with a specific delay - plays the animation repeatedly based on the specified delay
• Continuous - plays the animation indefinitely without pause.

Copy the configuration setting for Swift

As we already mentioned, animations can be implemented on Xcode by using the symbolEffect() method.

To make it easy to transfer animation settings from the SF Symbols App to Xcode, a developer can use the Copy Configuration feature, which translates the animation behavior into code ready to be added as a modifier to their view.

This feature provides a snippet using the symbolEffect(_:options:value:) method that can be pasted directly into the Xcode project.

.symbolEffect(.variableColor.cumulative.hideInactiveLayers.nonReversing, options: .repeat(.continuous))

If you are using a system symbol, copy the Swift configuration and paste it into your project where needed. Otherwise, If you are shaping custom animations and personalizing them layer by layer, then you need to:

1. Export the symbol from the SF Symbols app menu file section

2. Integrate it into the Xcode project

3. Use the Image view to render the symbol

Image("cloud.heart.combined")
    .font(.system(size: 100))
    .symbolRenderingMode(.multicolor)

When exporting the symbol from SF Symbols app, the file integrating in the Xcode project will include the annotations required to describe the animation behavior just created in the Sf Symbols app.

4. Apply the copied configuration to the image.

Image("cloud.heart.combined")
    .font(.system(size: 100))
    .symbolRenderingMode(.multicolor)
    .symbolEffect(.variableColor.cumulative.hideInactiveLayers.nonReversing, options: .repeat(.continuous))

Shape the symbol layer by layer

To shape an animated behavior that affects specific parts of your symbol, you need to divide the symbols into different layers and declare the behavior for each of them.

In this example, we are dealing with a custom symbol divided into three different layers; each layer is associated with a specific subpath of the icon. Apply this approach when you want to create a more dynamic animation that differs from the animation applied to the entire symbol.

When animating the entire symbol, the animation affects all layers simultaneously, giving the perception that the symbol is animating as a whole.

On the other hand, when creating animations using a layer-by-layer approach, it will introduce subtle timing differences - micro delays applied for each layer - making the animation more dynamic. 

Clear Behind

Clear Behind is a feature that allows us to clean what’s behind the layer, resulting in the layers behind the one we are working on not being visible.

On animation dealing with color such as breathe, pulse and variable color, it affects the way the color is transitioning into the final one.

Activate Variable Color

Activate Variable Color is useful when using the variable color animation. It allows only animate the color of the layers with the feature activated. This ensures only the selected layers participate in the color cycle.

Pulse - Rotate Option

Pulse and Rotate animations can be applied to specific layers, allowing more granular control over what animates and how.

The resulting behavior is an animation that fades the opacity when pulsing or rotating the subpath of some or all layers in a symbol-based image.

Using SF Symbols to shape animations facilitates the process. With the ability to apply animations to individual layers, configure repeat behaviors, and preview everything directly in the SF Symbols app, integrating symbol animations into SwiftUI projects becomes more intuitive.

The use of annotations is crucial to this process, as they ensure that your animation settings are preserved and correctly rendered when transitioning from SF Symbols to Xcode. These annotations encapsulate the timing, behavior, and target data for animations, making them indispensable when transferring animated designs into functional app code. And they are available just by exporting the symbol.

In practice, annotations enable SwiftUI’s symbolEffect() modifier to interpret and reproduce your animation setup with fidelity. Without them, even well-designed animations would fall flat, as Xcode would have no way of understanding the intended behavior for each layer. By embedding this metadata into your custom symbols, annotations enable you to bring expressive, precise animations into your apps with minimal manual configuration.

If you want to learn more about SF Symbols, check our previous articles.

Creating Custom SF Symbols

Learn everything you need to know to create custom SF Symbols for your applications.

Create with SwiftAntonella Giugliano

Animating SF Symbols with the symbol effect modifier

Explore the different ways you can animate SF Symbols with SwiftUI

Create with SwiftMatteo Altobello