'L'

Hi Jack, Thanks for responding! You're right, the scrollbar's not acting as a scrubber, it's just the trigger for the replay and to advance the content. Re scrolling 'even 1px' and what to do if the user scrolls immediately - there's definitely some logic to be worked out! Ideally I want to play the full video on load and then scrub to the halfway point, while also scrubbing the 2nd content/timeline. This would let me address the logic (onLeave, onEnterBack, etc) and look good whichever direction is being scrolled. ...I just spent the whole day replying to this and trawling the forums for umpteen different solutions that 'might' fit my purposes. Finally as the sun is about to set, I stumbled across this thread, which is actually an old answer from you Jack (thanks again)! No canvas, no blobs, just sprites... Thank goodness, because my head is spinning with everything I've read today! I should be able to work with that, assuming 390 images isn't too heavy. Failing that, I might have to delve into canvas - what do you think? ['blobs' probably best left alone...although they are mentioned in this thread, which is also potentially useful] Crazy thing is, I remember finding the original tutorial for this ages ago, wish I'd stumbled across this link sooner...doh! ?‍♀️

Canvas, blobs and bears oh my!! Ok maybe not bears, but sprites didn't fit with the Wizard of Oz theme I was going for ? I have a 13s video that I want to play when the page loads. After it's played, onScroll I want it to replay to 50%, then stop. Basically, the video is a head rotating 360 in 3d space, at 50% it faces right, which is where I want to place my 2nd lot of content. I've searched the forums and found loads of interesting stuff involving airpods, canvas, scrolling sprites, image sequences and even something to do with 'blobs' in videos. Most of it's beyond me, but I'm happy to delve in - I'm just not sure where to focus my search. Can anyone tell me if what I've described is possible and if so, what would be the best way to go about it? Video seems the likeliest and smoothest option, as only play/pause need to be controlled, plus 13s*30fps seems a bit unwieldy, but I could be wrong... Any thoughts would be gratefully appreciated!!

Exactly! Thanks for the response - I knew there were several ways to do it, but wasn't sure which was best/preferred or if there was something in gsap/scrollTrigger to cover it. I like your method best, ie don't play the first animation if the user is scrolled down on load. Thanks for your help, much appreciated!!

Thanks for your response Zach - sorry about the missing pen Here's what I've got (more or less). I kept the layered pinning, as it replicates what I'm working with. Example pen

OK, this feels like it should be super simple, but for the life of me, I can't figure it out - needless to say, I'm a noob! I have a hero section at the top of my page, onload it animates in a headline and paragraph 1. On scroll, paragraph 1 animates out, paragraph 2 animates in (headline remains). The animations are currently on 2 separate timelines; the 1st plays without user interaction, the 2nd is controlled using scrollTrigger. FYI I'm also using 'layered pinning from bottom' (courtesy of Greensock/Codepen - lovely, thank you!). The problem - if the page is refreshed 'mid scroll', both paragraphs are visible. How do I ensure only 1 paragraph is visible at a time? Callback, if/else statement, check scroll position, a master timeline controlled by scrollTrigger...witchcraft?? I feel like there's an obvious/accepted method I'm overlooking - can anyone point me in the right direction? I haven't included a codepen, as I can't replicate the issue due to the scroll position being reset when the page is refreshed. Plus, my setup probably isn't right to begin with - hence this post... Any help would be greatly appreciated, thanks!!