beautiful-lyrics icon indicating copy to clipboard operation
beautiful-lyrics copied to clipboard

(Suggestion) Staggered Scrolling

Open solstice23 opened this issue 2 years ago • 3 comments

The built-in smooth scrolling animation is kind of abrupt and stiff. It seems using a custom scrolling timing function would be a good alternative.

Furthermore, would you consider staggered scrolling animation? Here is a video showing the animation from my project:

https://user-images.githubusercontent.com/23134847/216518149-9d85c6a6-4ad5-4c2c-9843-a2f65f610fd0.mp4

Btw the scaling animation of lyric lines is stiff too, maybe a smoother timing function is better.

solstice23 avatar Jul 20 '23 21:07 solstice23

The scrolling itself I believe is fine - and I haven't received many complaints about it - so I don't think it's worth creating an entirely custom scrolling behavior just for this.

The staggered scrolling however is very cool. That alone would be somewhat worth creating a custom scrolling behavior (since I am just using built-in smooth-scrolling atm); but, it would be beyond the scope of the coming updates and wouldn't be attended to until later on.

So I'm going to update this to a suggestion to add Staggered Scrolling since I don't plan on changing the scroll behavior as I think it's fast enough for line-reading but slow enough that it's comfortable.

surfbryce avatar Jul 20 '23 21:07 surfbryce

I was trying to play around a bit with recreating Apple Music's scroll, which whilst it isn't as great as the one shown in the video above, it's still nice and satisfying. I came to this solution which actually lacks the staggered scroll I feel still gave a better effect than the current one in beautiful-lyrics. This doesn't require you to build a new scroll view for the staggered effect, instead with a simple transition (a more visible one than the current), e.g ease, between the lyric change felt way nicer and better to look at. As currently it's very snappy and straight to the point

https://github.com/surfbryce/beautiful-lyrics/assets/33316699/b86a9a33-1c91-4233-8905-a1ee5a35bc92

crackheadakira avatar Apr 20 '24 23:04 crackheadakira

@crackheadakira The planned custom scrolling functionality doesn't only have the staggering effect as a motivation, there are many benefits to it:

  • Full control over who owns the scrolling state (user or code)
  • Can implement any scrolling behavior I want
  • Can fully optimize layout performance since everything will be positioned through code (thus not relying on the rendering engine to do that work and saving a ton of performance loss since everything will be purpose built). The only thing that will rely on the rendering engine is the offset applied to the overall container to shift the contents up/down.
  • Can have actual proper overflow behavior where overflow is only applied vertically rather than being forced to apply it vertically AND horizontally

Those are what I can think of off the top of my head at the moment. So when I get to redoing the scrolling stuff, I want to do it right and go the whole way, so I won't be touching scrolling until then.

surfbryce avatar Apr 20 '24 23:04 surfbryce