---
title: VariableColorSymbolEffect
framework: symbols
role: symbol
role_heading: Structure
path: symbols/variablecolorsymboleffect
---

# VariableColorSymbolEffect

A type that replaces the opacity of variable layers in a symbol-based image in a repeatable sequence.

## Declaration

```swift
struct VariableColorSymbolEffect
```

## Overview

Overview A variable color animation draws attention to a symbol by changing the opacity of the symbol’s layers. You can choose to apply the effect to layers either cumulatively or iteratively. For cumulative animations, each layer’s opacity remains changed until the end of the animation cycle. For iterative animations, each layer’s opacity changes briefly before returning to its original state. note: Variable color animations affect only symbols containing variable color layers. important: Because SwiftUI is a state-driven framework, you pass a value parameter when adding discrete effects, like bounce. You trigger the animation by changing the value parameter. Because AppKit and UIKit are event-driven frameworks, discrete effects animate automatically when added to an image view. // Add an effect in SwiftUI. @State private var value1 = 0 @State private var value2 = 0 var body: some View {     HStack {         Image(systemName: "cellularbars")             // Iteratively activates layers.             .symbolEffect(.variableColor.iterative, value: value1)             .onTapGesture {                 value1 += 1             }         Image(systemName: "cellularbars")             // Cumulatively activates layers reversing and repeating three times.             .symbolEffect(.variableColor.hideInactiveLayers.reversing, options: .repeat(3), value: value2)             .onTapGesture {                 value2 += 1             }     } } // Add an effect in AppKit and UIKit. // Iteratively activates layers. imageView1.addSymbolEffect(.variableColor.iterative, options: .nonRepeating)      // Cumulatively activates layers reversing and repeating three times. imageView2.addSymbolEffect(.variableColor.hideInactiveLayers.cumulative, options: .repeat(3))

## Topics

### Controlling fill style

- [cumulative](symbols/variablecolorsymboleffect/cumulative.md)
- [iterative](symbols/variablecolorsymboleffect/iterative.md)

### Changing playback style

- [nonReversing](symbols/variablecolorsymboleffect/nonreversing.md)
- [reversing](symbols/variablecolorsymboleffect/reversing.md)

### Affecting inactive layers

- [dimInactiveLayers](symbols/variablecolorsymboleffect/diminactivelayers.md)
- [hideInactiveLayers](symbols/variablecolorsymboleffect/hideinactivelayers.md)

### Accessing the configuration

- [configuration](symbols/variablecolorsymboleffect/configuration.md)

## Relationships

### Conforms To

- [Copyable](swift/copyable.md)
- [DiscreteSymbolEffect](symbols/discretesymboleffect.md)
- [Equatable](swift/equatable.md)
- [Escapable](swift/escapable.md)
- [Hashable](swift/hashable.md)
- [IndefiniteSymbolEffect](symbols/indefinitesymboleffect.md)
- [Sendable](swift/sendable.md)
- [SendableMetatype](swift/sendablemetatype.md)
- [SymbolEffect](symbols/symboleffect.md)

## See Also

### Symbol effect types

- [AppearSymbolEffect](symbols/appearsymboleffect.md)
- [AutomaticSymbolEffect](symbols/automaticsymboleffect.md)
- [BounceSymbolEffect](symbols/bouncesymboleffect.md)
- [DisappearSymbolEffect](symbols/disappearsymboleffect.md)
- [PulseSymbolEffect](symbols/pulsesymboleffect.md)
- [ReplaceSymbolEffect](symbols/replacesymboleffect.md)
- [ScaleSymbolEffect](symbols/scalesymboleffect.md)
- [BreatheSymbolEffect](symbols/breathesymboleffect.md)
- [RotateSymbolEffect](symbols/rotatesymboleffect.md)
- [WiggleSymbolEffect](symbols/wigglesymboleffect.md)