Marquee (scrolling) Text in SwiftUI

Question

I am having difficulties implementing the marquee (scrolling) text view in SwiftUI. The problem is that the text needs to stay in the original (0) position for 2 seconds and the starts moving to the left, show up on the right and continue scrolling until the 0 position and wait for 2 seconds again.

Answer 1

You can work with what's in this video to get something working, but honestly it's difficult to make it work with varying screen sizes if your view is in any way responsive. But if you are using the foundation in that video for the animations and combining that with a geometry reader to get your zero position and rightmost entry point position, you could get the scroll positioning correct.

As for starting and stopping, I would suggest you use a Timer to toggle a boolean @State variable called scrollText to start/stop the animation 2 seconds after its duration. You would start by first toggling the animation in .onAppear, like this:

Text("Hello World")
  .offset(x: scrollText ? zeroPoint : screenEntryPoint)
  .animation(Animation.linear(duration: 8).repeatForever(autoreverses: false))    
  .onAppear {
    self.scrollText.toggle()
  }

If you then set a timer for 10 seconds to toggle scrollText, you would be able to get the animation to run for 8s, pause 2 seconds, and then run again.

Please note that to make marquee text work, you also need to REPEAT the text twice, so that the text will animate in from the right while it's also leaving from the left. Good luck!