Scrolltrigger - Holding pins after animation and jumping sections.

[Bogomip]

Hi all, 

 

So i'm new to GSAP in general and came to it for ScrollTrigger. I've been working on my site as shown above but have run into a few questions:

 

(a) This is more general. Lets says something is pinned, i'm having no problem animating that pinned item but as soon as the animation is done the pin desists and the page keeps on scrolling. Is there a way to make the animation occur and then have the item remain pinned without an animation for a certain distance scrolled before the next content? I go around this in some extent on my title by using expo.in as the ease, but that seems hacky and I would prefer this to work properly :-)

 

(b) This is specific to the codepen.io listed. When you scroll down you get to a violet colored section which says 'You need to eat sausages', and then 'RIGHT NOW' flies in separately. This is working as intended (except for the problem of what I asked in a), but when you keep scrolling and the top of the viewport gets to the top of the RIGHT NOW container, the whole violet section jumps down to the center of the page. I checked in the common problems and there was a jumping issue but I struggled to see if it related to my problem.

 

Thanks for any help :)

 

Bogo

See the Pen BapLzEp by bogomip (@bogomip) on CodePen

[akapowl]

 

Hey Bogo.

 

If you want an animation on a pinned element and the pin itself to have different durations then probably the most common way would be to set up two individual ScrollTriggers with different 'durations' (starts / ends) - one that handles only the pinning part of the element and one that handles only the animation of that element.

 

Alternatively you could use a timeline with a pinning scrollTrigger attached and use the duration and position-parameter of the tweens in your timeline to determine when and for how long the animation is supposed to run and/or position empty tweens wherever you don't want an animation to happen.

 

That issue (b) you are referring to is caused by using pin on the same element in those two different ScrollTriggers for which '#panel-two' is the trigger.

If you remove the pin from the second one you should get the result you expected.

 

Hope this helps  - welcome to the forum.

 

[Bogomip]

Hi akapowl, 

 

Much appreciated, as I am new to GSAP and for simplicity I just unpinned the animations and created a new pinned instance - made it easier to control and much easier for me to follow, thanks!

 

This also solved the second problem, which you also explained and did work before I changed the pinning system - so thanks for that too.

 

Thanks again!

 

Bogo