What animations are available for SF Symbols?

Asked on 07/30/2024

1 search

Tailscan

This post is brought to you by Tailscan, the best devtool for Tailwind CSS.

Want to sponsor? We'd love to chat →

SF Symbols 6 introduces several new animation presets to enhance the expressiveness of your app's interface. The available animations are:

  1. Wiggle: Oscillates a symbol in any direction or angle to draw attention. This can be used to highlight changes or a call to action that might be overlooked.
  2. Breathe: Smoothly scales a symbol up and down to indicate ongoing activity, giving it a living quality.
  3. Rotate: Spins part of a symbol around a designated anchor point, which can be used to indicate that a task is in progress or to add dynamic movement.

Additionally, there are new playback options for these animations:

  • Play once: Allows for a single viewing.
  • Repeat with delay: The animation will play over and over again with a specified pause between repetitions.
  • Continuous: The animation will seamlessly continue until it is explicitly stopped.

Some existing presets have also been enhanced:

  • Magic replace: Smoothly animates badges and slashes, providing a more dynamic transition.

For more detailed information, you can refer to the session What’s new in SF Symbols 6.

Provide feedback
What’s new in SwiftUI

What’s new in SwiftUI

Learn how you can use SwiftUI to build great apps for any Apple platform. Explore a fresh new look and feel for tabs and documents on iPadOS. Improve your window management with new windowing APIs, and gain more control over immersive spaces and volumes in your visionOS apps. We’ll also take you through other exciting refinements that help you make expressive charts, customize and layout text, and so much more.

What’s new in UIKit

What’s new in UIKit

Explore everything new in UIKit, including tab and document launch experiences, transitions, and text and input changes. We’ll also discuss better-than-ever interoperability between UIKit and SwiftUI animations and gestures, as well as general improvements throughout UIKit.

What’s new in AppKit

What’s new in AppKit

Discover the latest advances in Mac app development. Get an overview of the new features in macOS Sequoia, and how to adopt them in your app. Explore new ways to integrate your existing code with SwiftUI. Learn about the improvements made to numerous AppKit controls, like toolbars, menus, text input, and more.