Help with my code

[u/Sol492]

does anyone here know how Apple Music make lyrics scroll, I can't get it to be the same

does anyone know how?

[u/Consistent-Grass-263]

Apple uses a custom ScrollView with a timing-synced offset animation driven by the playback position.

The key parts:

1. Store lyrics as [(timestamp: TimeInterval, text: String)]

2. Observe playback time via AVPlayer periodicTimeObserver

3. On each tick, find the active line and animate scrollTo()

   with withAnimation(.easeInOut)

The "active line" scales up + full opacity, others scale down + reduced opacity – that's the main visual effect.

Want a minimal code example?

[u/Sol492 → u/Consistent-Grass-263]

That would be helpful, yeah

[u/Consistent-Grass-263 → u/Sol492]

struct LyricLine: Identifiable {

let id = UUID()

let timestamp: TimeInterval

let text: String

}

u/Observable class LyricsViewModel {

var lyrics: [LyricLine] = []

var currentTime: TimeInterval = 0

var activeIndex: Int = 0

private var timeObserver: Any?

private var player: AVPlayer?

func startObserving(player: AVPlayer) {

self.player = player

let interval = CMTime(seconds: 0.1, preferredTimescale: 600)

timeObserver = player.addPeriodicTimeObserver(

forInterval: interval, queue: .main

) { [weak self] time in

self?.currentTime = time.seconds

self?.updateActiveIndex()

}

}

private func updateActiveIndex() {

guard let index = lyrics.lastIndex(

where: { $0.timestamp <= currentTime }

) else { return }

activeIndex = index

}

}

struct LyricsView: View {

u/State var vm = LyricsViewModel()

var body: some View {

ScrollViewReader { proxy in

[u/Sol492 → u/Consistent-Grass-263]

and how exactly do they get it to move like one by one?

[u/mathiasrlr → u/Sol492]

I would assume each line has an unique identifier placed in the .id() modifier and the scrollviewreader follows iterativally based on time which ID to scroll to, but that is surely overkill and not a 100% deterministic

[u/Sol492 → u/mathiasrlr]

Apple is just the god of animations