Hello Hype friends,
I’m at the end of a project where I’m refining behavior and getting things polished for release. One nagging issue I’m currently trying work through has got me stumped!
Here is a brief overview of my situation - what I’m trying to do and where I’m stuck:
I’m making a site that features scenes/pages with audio files that can be played (and each audio file has scrolling lyrics that are synched along with the audio file playback).
I have an autoPlay system in place such that, if autoPlay is turned on, the song/scene will automatically transition (triggered
onend) to the next song and continue to play.
If autoPlay is OFF, when the song gets to the end of the track, the audio track jumps back to the beginning and resets (and the lyrics reset along with it). This behavior works and looks fine and is expected (again, when autoPlay is OFF).
However, if autoPlay is ON, the audio track jumps back to the beginning and resets right before the transition (which is a push from right to left transition). The problem with this is that the song and lyrics resetting so abruptly looks distracting and unnatural right before a push transition.
I’m trying to hide, pause, delay or do whatever I can to make it look like the song lyrics stay in the place when autoPlay is on and the scene transitions to the next song. I can’t figure out how to do this since I need to trigger any ‘hiding’ timelines right before
onend on but not
onend. If I trigger it
onend, it would be too late and the song would have already resetted itself.
One fix I have tried (that almost worked), is if autoPlay is on,
onend I made the song jump to the end right after it resets. On a desktop computer this happens so fast, it looks like it just stays there.
Problem is, on mobile it’s not fast enough and a flash back the 00:00 mark is momentarily perceivable before it flips back to the end. Plus, if the user uses the audio scrubber to quickly scrub to the end of the audio track, a visible flash is again triggered as it reaches the end.
This is clearly not a workable solution.
Another thing I’ve tried to do is to keyframe the lyric opacity changes directly into the autoPlay timeline, so that in the very beginning of scene load the lyrics are invisible, then they fade into view on song start, stay visible on playback, and then the lyrics fade out again a few seconds before the end of the track. This solution looks great (and works great with the scrubber!), but I really want the lyrics to fade into view on scene load and to fade into view when the song resets to 00:00. If I hard code the opacity changes into the autoPlay timeline, I can’t find any way to override the opacity and force the lyrics to fade into view without the song playing (played around with relative timelines for this, but no luck).
In a best case scenario, here is what the behavior should be:
- when a song/scene loads, the lyrics would first be invisible. After a second or two the lyrics would fade into view and stay in this default state until further action is taken.
- when an audio track is playing, the lyrics would stay visible until 1 or 2 seconds before the end of the song. Once it reaches the point where it is 98% or 99% through the song, the lyrics would disappear.
- if autoPlay was ON when the end of the song is reached, the lyrics would stay invisible and the transition to the next scene would be triggered. If autoPlay was OFF, when the end of the song is reached, the lyrics and the audio would reset back to 00:00 and then after a second or two the lyrics would fade back into default state.
Is there anyone that can think of a way to put some sort of listener in place that fades the lyrics to invisible when it’s 2 seconds from the end of the song and also fades the lyrics back into view whenever the audio is reset back to 00:00?
Or perhaps (I’d also be fine with this simpler behavior:) is there just a way to just pause the lyrics when
onend is reached so that the lyrics don’t automatically reset before the transition has had a chance to finish?
Ether of these would solve my issue but can’t figure out how to make it work.
If you are willing to help, please let me know and I’ll DM you a link to download the Hype project. The project contains some proprietary content that I’d rather not make easily available to the general public until it’s ready for release, but would be happy to share it with anyone for purposes of troubleshooting.
Thanks so much!