digital_source

Hi, Thanks for your quick reply @GreenSock! Ehm, yes, as for the 'minimal demo', the code that I've prepared was supposed to be that (it's a part of a bigger sequence) but I have to admit, looks like I got carried away a little So apologies for throwing such a large wall of text at you. But your answer has got me thinking and pushed me in the right direction, and I solved the problem (or at least found a workaround that works for me). Probably a trivial thing for you, but I wasn't able to find an example like that online before, so I'm attaching a codepen below, maybe someone will find it helpful. So, generally speaking, what I did was: I created one master timeline that holds all the animations, with the labels added to mark start and end of each sequence. That timeline is paused then when the page loads. After that, it's being controlled by stand alone ScrollTriggers callbacks - playhead is moved to the right label depending on scroll position. Thanks to that, the animations never overlap and conflict with eachother, everything works smoothly and I achieved an effect kind of similar to fullPage.js, which I wanted. Also, I think it shouldn't be hard now to modify it to speed up the animations depending on scrolling speed etc. So, once again, thanks for your help! https://codepen.io/shx420/pen/JjWErNM

Hello there, First of all, thank you GSAP team for creating such a great library and publishing it for free - fantastic work. Now, the question: I have this idea that I'd like to implement, a page with several full-viewport-height panels. Each of the panels include a couple of animated elements that activate once a certain scroll distance is reached (codepen provided). The animation is built in such a way that its frames could all be (theoretically) placed on a single timeline and animate smoothly from first to last, and backwards as well (each panel fades out at the end of its 'life', so - again, theoretically - no overlapping panels). Slightly similar to fullPage.js functionality. I've built a simple draft of what I want, but have a few issues that I don't know how to solve: 1. Why is it that one of the headers (second frame, purple-ish background) called 'XXX Problem' doesn't fade out nicely like the rest of them, but vanishes right away when moving between panel 2 and panel 3, and when you move back it doesn't appear at all? 2. On panel 3, why do the 3 boxes top and bottom parts start from a certain non-zero height instead of 0, like the 3 boxes on panel 2? 3. If I move slowly between the panels and wait for each animation to finish, it works as intended. However, when I scroll quickly, or refresh the page and start loading it with a scrollbar away from top, some elements can remain on screen, making the rest unreadable. Not expecting a full solution here of course, but can I get some tips on how can I get rid of any artifacts that appear when I scroll the page quickly etc? Is there a way of putting all animations on a single timeline and, say, attach more than one scrollTrigger to it? Thanks. M.