scrolltrigger Issues with multiple pins in a row

[Mythos]

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.

See the Pen WNrwoew by ldmythos (@ldmythos) on CodePen

[ZachSaucier]

Hey Mythos, welcome to the forums! Glad you finally decided to post something  

 

Can you please try to better describe what you're trying to do? Or is there a site whose behavior you're trying to copy? Cutting out all irrelevant parts like extra elements or animations can help as well. I'm not sure that I understand your goal.

[Mythos]

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.

[ZachSaucier]

18 minutes ago, Mythos said:

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 have no idea what comic you make so I wouldn't worry about it  Cool idea though. I'd like to see the final product when it's public.

 

We'll look into the feasibility of having multiple pins on the same element. 

 

In the mean time, have you considered trying only pinning it once but using a translation animation to go to a later part of the element? That way you kind of fake two pins.

[Mythos]

47 minutes ago, ZachSaucier said:

In the mean time, have you considered trying only pinning it once but using a translation animation to go to a later part of the element? That way you kind of fake two pins.

 

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...

[ZachSaucier]

I believe the latest beta of ScrollTrigger does what you want it to do. We're still working on the multiple-pin functionality so please let us know if you run into issues. The more minimal of a demo you can provide the better  

See the Pen dyGMLXz by GreenSock (@GreenSock) on CodePen

[GreenSock]

Yep, Zach is right - it was a lot of work but the latest beta should accommodate multiple pins. It's best to create them in the order they'd happen, FYI. That's probably how everybody does it intuitively anyway, but I figured I'd mention it. 

 

Please bang on it a bit and let us know if it works well for you. 

[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