Mythos

That's amazing, thank you! I'll test it out ASAP and let you know if I have any further problems. I have no question it must've been a handful but I really appreciate it, it's why you're the best! Also, apologies for the complexity of the pen, I was just trying to make sure I replicated all conditions perfectly. Like I said, new at this :D

Honestly, I wouldn't even know where to start with that, especially since this isn't a one-time thing - there's 20 pages in total, some of which will get pinned multiple times. Kinda seems like it'll end up a mess. I appreciate you looking into it! Pinning was one of the main reasons I opted for GSAP and waited for ScrollTrigger, so hopefully there'll be a solution in the horizon. I'll also try to figure out some workaround. Considering doing some extra wrapper divs to pin, but that's gonna mess with my CSS and my DOM size is already enormous as it is...

Hey Zach! Was hoping to not get too far into specifics as it's sort of a "secret" project and a surprise for my community, but if it helps... just keep it on the down-low, please! ? I'm adapting an old webcomic of mine into animated form. Those 'pages' are basically an HTML/CSS recreation of the old JPEG pages, plus there's some other elements I've left out here on purpose, like the speech balloons and the panel images themselves. What you're seeing in the pen is the basic wireframe of two of the pages. The idea is that, once you get to page 3 and a bit with three panels side-by-side and a lot of dialogue, either the page or, preferably, the whole comic itself gets pinned as the animations roll out, then unpins after you've read those panels. That said, this is gonna happen fairly frequently and in rapid succession - in this example (and the bit where I got stuck), it gets pinned at the end of page 3 for some dialogue and a panel reveal, then it gets unpinned but immediately after, on page 4, it gets pinned again as panels and speech balloons get revealed with scroll. However, since the first pin has a duration of around 700 pixels but page 4's first panel is a bit closer than that, it's messing up the whole thing. If you comment out the animations for page04_panel01 and onwards, you'll get an idea of what page03_panel03 is actually supposed to do once pinned. PS: I don't want to ask too much, but please let me know if I can also do anything better in regards to writing the GSAP animations, I'm still fairly green (no pun intended) and any help is appreciated. PPS/EDIT: If it's still not clear what the problem is, try scrolling the Codepen about midway through and a bit onwards. See how it jumps around and glitches a bit? It should be pinning one bit, unpin, then also pin the next bit, but instead GSAP is getting very confused and breaking the animations entirely.

Hello there! I'm new to GSAP (and CodePen, as it so happens), I've been lurking for ages as I worked on a personal project that I wanted to include animations with. I waited for ScrollTrigger to come out and immediately jumped into it as soon as it came out! So far I'm really impressed with GSAP and hope to bring it into my work life as well. Anyway, this could just be me being an amateur, but I'm having an issue trying to pin the same thing multiple times in a row. Basically I want to stick the whole section as it hits a certain div, keep it stuck for a few hundred pixels' worth of scrolling, then unstick and re-stick it almost immediately after for another div. Unfortunately, that's creating an issue where, at least from what I understand, the scroll-start and scroll-end get all messed up because they're not accounting for the 'distance' that the section was stuck. Mind you, I tried pinning the 'page04' div by itself and then pinning 'page05' for its turn and that worked well enough... but I would later have to pin 'page05' multiple times as well and it was the same problem. Genuinely not sure if this is a bug or just a mistake of mine, can anyone please help? Thanks! PS: Please let me know if you need additional info, like I said, I'm very new at this.