vibe9

I sincerely appreciate all of your help, and your insight as far as providing a suggestion on how to tackle this. After an exhausting two weeks of myself and my partner (we are at desks beside one another in the same office) both trying every possible way we could think of to make GSAP work for this project -- the challenges above notably being the rate limiting step, we have abandoned using GSAP for this project. Instead I coded the whole thing in a day (yesterday) using a couple lines of JS to sync the scroll and watch sections using intersectObserver, along with some CSS keyframe animations to move and fade things, and I now have it all working (sans GSAP): https://codepen.io/vibe9/pen/OJBPweV

I have seen quite a few examples but none seem to work when applied to my particular example/use case. Wondering if anyone can help me here. I need the nav anchor links to scroll to each one of the panels within my "Pinner" timeline. Thanks!

That is perfect, thank you so much! I am learning a lot here. I really appreciate your help.

For those interested, here's where I have ended up: https://codepen.io/vibe9/pen/eYLwpEx If you have any suggestions on how to make the part2() more efficient (as opposed to having to repeat the same block of code 3 times) please let me know

Yes, the old saying "if it ain't broke". Well, I am not having much luck trying to animate text within the pinned layers. I've been trying to combine my original circle animation timeline with another pinned layer example. But I can't seem to get the fading section timeline to "wait" for my circle animation to finish. Any ideas would be very much welcome! https://codepen.io/vibe9/pen/yLxrdXw

With this part I was just trying a few things, and never ended up using it but forgot to clean it out before posting.

Thanks for your reply and thoughts @Rodrigo I have a more refined and cleaned up version of the CodePen here https://codepen.io/vibe9/pen/PodgXOv As for the load and resize event triggers, those are actually needed to make the circle svg image mask work. Par1 and Part2 are simply the two timelines that I constructed and then put together in masterTimeline, and that's ultimately where I was having trouble. Ideally there would not be two parts, the pinned layers in part 2 would simply scroll right overtop of the circle layer without it scrolling upward to reveal the background layer below. Instead what I did, to fake it, was use the same image twice and fade out the opacity of the first image layer in Part 1. But if there's a better way I am certainly open to it. My next challenge is to somehow animate the text within the pinned layers in Part2.

Hi All, I'm currently trying to combine a couple of different timeline sequences, both of which I've adapted from some others' code pens. Right now the issue I have is that once the circle animations finish, I need the box panels to animate up overtop of the space where the circles are in. I can do this by moving the "cards" section into the same section as the circles however then the scroll trigger of each is the same and both animations happen at the same time. What I need is for them to happen essentially in the same space but at different times. I realize there are probably a few ways of going about doing this but my knowledge of Gsap is currently too limited to figure that out. Ultimately, what I see happening is that the #introBox css position fixed is removed by Gsap once the animation is finished whereas, ideally, either #introBox or #introBoxWrap would get a position fixed once the animation is finished so that the .cards can slide in overtop rather than what happens now which is the last image of the circles scrolls upward (because the parent container is no longer fixed).

Thanks very much @akapowl! Believe it or not I joined this forum way back in 2016 but it's taken me half a decade to finally get into GSAP enough to finally post These are really, really helpful improvements and insight you've provided, and your Pen is perfect. I am really looking forward to doing lots more with GSAP as I continue to learn. Thanks again for the thoughtful and quick response.

Ok, I've updated my pen and managed to flip the direction by changing the CSS bottom property to -100% and changing the z-index value from negative to positive. The only issues I'm having now are: 1) I need it to start without a blank space, I need the first two panels to be showing already as soon as the wrapper container enters view. 2) Panel #10 is not coming into view at all, so that somehow needs to be fixed New Pen: https://codepen.io/vibe9/pen/XWeWaXa

Trying to do a few things here and it seems I am close but not quite there yet. Certainly my lack of experience with GSAP is one thing standing in the way Hopefully someone can help, with either some input on what to change or perhaps a working example I've somehow missed. What I need this to do is animate according to the attached image (below). Where the panel slides in from the bottom as opposed to what it's doing now where it wipes upward and reveals from behind. I need it to slide in from the bottom and go upwards overtop. Also, when you get to the last two panels, rather than the second last panel (panel 9) moving up and leaving a blank space, I want it to just end the scroll animation and let the page scroll down to the next section (ending the gsap timeline there).