Counter Transition effect in SwiftUI

CounterTransition.swift

import SwiftUI

public extension AnyTransition {
  static var carousel: AnyTransition {
    .asymmetric(
      insertion: .move(edge: .top)
        .combined(
          with: .modifier(
            active: CarouselTransitionModifier(state: .insert),
            identity: CarouselTransitionModifier(state: .identity)
          )
        )
        .combined(with: .opacity),
      removal: .move(edge: .bottom)
        .combined(
          with: .modifier(
            active: CarouselTransitionModifier(state: .remove),
            identity: CarouselTransitionModifier(state: .identity)
          )
        )
        .combined(with: .opacity)
    )
  }
}

private struct CarouselTransitionModifier: ViewModifier {
  enum State {
    case insert, identity, remove
  }
  
  let state: State
  
  func body(content: Content) -> some View {
    var degrees: CGFloat {
      switch state {
        case .insert: return 16
        case .identity: return 0
        case .remove: return -16
      }
    }
    
    return content
      .rotation3DEffect(
        .degrees(degrees),
        axis: (x: 1, y: 0, z: 0)
      )
  }
}

// Usage:
Text("\(lhsPoints)")
  // Tells SwiftUI to treat the view as a new one every 
  // time the value changes. This will trigger the transition
  // effect.
  .id("Scoreboard.lhs.\(lhsPoints)")
  .transition(.carousel)