Exploring SwiftUI: Make SF Symbols Wiggle Wiggle

I got myself a new iPad, and damn, the 13” makes my app designs look empty on that huge screen. I redesigned the now playing screen for my app, LyricsLink (iPadOS update soon!) taking inspiration from the Music app.

One call to action that I was not sure about was the Translate button, something that is the unique point of the app. It did not look well as a button at the buttom, so I moved it in the song’s header view.

One problem though, the button seems overlooked. I had seen the wiggle animation in SF Symbols 6, and this seemed to be a good use-case for it!

The idea is that the wiggle animation on the translate icon emphasises that there is a button to translate the lyrics.

WiggleSymbolEffect

We have a new structure WidgetSymbolEffect introduced this year and it conforms to the SymbolEffect protocol. It is defined like this:

@available(macOS 15.0, iOS 18.0, tvOS 18.0, watchOS 11.0, visionOS 2.0, *)
 
public struct WiggleSymbolEffect : SymbolEffect {
 
  public var clockwise: WiggleSymbolEffect
 
  public var counterClockwise: WiggleSymbolEffect
 
  public var left: WiggleSymbolEffect
 
  public var right: WiggleSymbolEffect
 
  public var up: WiggleSymbolEffect
 
  public var down: WiggleSymbolEffect
 
  public var forward: WiggleSymbolEffect
 
  public var backward: WiggleSymbolEffect
 
  public func custom(angle: Double) -> WiggleSymbolEffect
 
  public var byLayer: WiggleSymbolEffect
 
  public var wholeSymbol: WiggleSymbolEffect
 
}

This effect offers several directional options:

• Horizontal movement: .left and .right
• Vertical movement: .up and .down
• Rotational movement: .clockwise and .counterClockwise

Interestingly, it also includes .forward and .backward options that adapt to the user's language direction for localisation experience.

For more specific needs, there is a .custom(angle:) option, allowing us to set a precise angle for the wiggle effect.

The .byLayer option is useful for complex symbols, as it animates different parts of the symbol independently. For a more uniform animation, the .wholeSymbol option is available.

@available(macOS 15.0, iOS 18.0, tvOS 18.0, watchOS 11.0, visionOS 2.0, *)
extension SymbolEffect where Self == WiggleSymbolEffect {
  public static var wiggle: WiggleSymbolEffect { get }
}

Here is a video from the SF Symbols beta app that explores the different type of options for the wiggle effect:

0:00

/1:18

1×

For my translate button, I stuck with the default wiggle, which gives a nice, subtle horizontal movement. But I could easily change it up if I wanted a different feel. For instance, if I wanted a more pronounced wiggle to the right, I could do:

.symbolEffect(.wiggle.right, options: .default)

Or if I wanted it to wiggle up and down:

.symbolEffect(.wiggle.up, options: .default)

Customizing the Wiggle Effect

The WiggleSymbolEffect offers several options to customize its behavior:

1. Default and Non-Repeating:
   • .default: Applies the wiggle effect once.
   • .nonRepeating: Similar to default, ensures the effect does not repeat.
2. Repeating Options:
   • .repeat(_): Allows you to specify how the effect repeats.
     • .continuous: The effect repeats indefinitely.
     • .periodic(count:delay:): Repeats a specific number of times with a delay between repetitions.
3. Speed:
   • .speed(_): Adjusts the speed of the wiggle animation.
4. Attaching to a Value: You can tie the wiggle effect to a specific value, causing it to trigger when that value changes.

For example, this is how I ended up using it in my app:

Image(systemName: "translate")
  .font(.title)
  .symbolEffect(.wiggle, options: .repeat(2), value: translationManager.paragraphs.count)
  .foregroundColor(.white)

In this case, the wiggle effect is linked to the count of paragraphs. The symbol will wiggle twice every time the lyrics count changes, drawing attention to updates in the lyrics and the user can translate them.

0:00

/0:09

1×

Conclusion

Wiggle effect seems to be a great way to draw attention to important actions or to add a bit of playfulness to your UI.

Remember, though, with great power comes great responsibility. While it is tempting to make everything wiggle wiggle, it is best to use this effect sparingly. You want to enhance your user experience, not make your users seasick!

Have you used the new wiggle effect in your app? I would love to hear about your experiences and any creative ways you have found to implement it! Reach out to me on X (formerly Twitter) on @rudrankriyam!

Happy wiggling!