0li

Thanks Jack, that helped a lot! I realize in this case the only thing I need to do is to jump start the sequence at the headline animation using a label and seek(), if the URL is loaded with hash to jump to the headline instantly. I was not digging into controlling playback of timelines yet, that's why I didn't think of seek(). Furthermore your explanation shows how to change the position of a tween within a timeline dynamically. That might also be very helpful in the future.

Hi, on page load I start an animation sequence. At the end of this sequence I'm fading in a headline which may be below the fold on some clients. Now when the user loads the URL with a specific hash to jump instantly to this headline position he won't be able to see the headline until the sequence above the fold (which he can't see now) is finished. -> Bad user experience. What I was trying is to instantly start the headline animation if the URL is loaded with this hash, otherwise start it at sequenced position. What I've accomplished so far, thanks to this post, is that I can play this tween (headline fade in) in both cases, at the end of the sequence and via another event. However it is not possible to play the tween BEFORE it has been played at the end of the sequence. After that I can play the tween again as much as I want, but in this case I need to play it instantly on load (and not play it again at sequence end). See CodePen example and try to fade in the headline before the sequence ends.

Hi, I have a similar problem but your solution is problematic. If I use such an approach and the user has JS deactivated he will never see the content because visibility stays hidden. When JS is enabled I want to fade in elements (e.g. opacity 0 to 1), without showing them before. If JS is disabled it should just show the content without animation. Is there any solution for that? And what are the other "few ways to get around this"?