scrolltrigger ScrollTrigger: How to use both pinSpacing: false and pinSpacing: true on the same pinned element?

[kazymirT]

Hello. I need help with an implementation. All sections need to be pinned, and additionally, the first section should have pinSpacing for an extra animation, as shown in the GIF. My searches, unfortunately, have not been successful. Maybe there is a way to achieve this.

See the Pen OPMeKEb by kazymirT (@kazymirT) on CodePen.

[Rodrigo]

Hi @kazymirT and welcome to the GSAP Forums!

 

Unfortunately because of the way pinning works is not possible to use pin true and false in the same element, is not a bug in any case just a limitation (for lack of a better word) of how HTML and CSS work.

 

Also in your demo I can't get the idea of what you're trying to achieve and unfortunately the GIF you posted doesn't really help to understand what you're after. Ideally post a minimal demo (emphasis in minimal) that clearly illustrates what you're trying to achieve so we can have a better look, just include a few colored divs, no need to add your entire project.

 

Happy Tweening!

[kazymirT]

See the Pen OPMeKEb by kazymirT (@kazymirT) on CodePen.

Hi @Rodrigo  — here’s what I need to achieve and how the ScrollTriggers should behave.

 

I have this structure with 3 sections that need to be pinned and two ScrollTriggers.

1. The first one is for pinning the sections — all three sections should be pinned.

2. The second one is for an animation inside the first section.

I need to combine them and get the following logic:
All sections should be pinned. When scrolling the first section and it reaches bottom bottom, the line animation should start. When that animation finishes, the first section should stay pinned, but I don’t understand how to implement this correctly.

Here’s the logic for the first section:
The first section consists of two blocks — .top and .animation.
When scrolling and reaching bottom bottom, the .animation block should be pinned at the bottom of the screen, and the line animation should start. When the line animation finishes (after +=550px), only then should the first section start being pinned.

I hope this makes it clearer what I’m trying to achieve.

 

[mvaneijgen]

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

 

 

Here you pen with the logic from the above post applied and I made it even fancier by having the last item come in from the top 🤯 not that you want that, but this shows you that with an animation you can make ScrollTrigger do what ever YOU want and with such little code! 

 

Hope it helps and happy tweening! 

 

See the Pen QwyeVzM?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.