scrolltrigger How to pin an element, stop pinning it and pin again?

[shalildev]

I got this case where I want to pin an element with scrolltrigger, then unpin, and then again pin it at a later section till the end of the page, can someone help me :D

See the Pen MWdGgRo by ninecodes (@ninecodes) on CodePen

[Sahil]

You could pin 2 different containers and move content to respective container based on scroll position.

[Hideakimaru]

Hi @shalildev,

So actually, I'm confused. But I have some ideas about this issue.

1. In your example, the markers "end" position is placed at the start of  ".section-3". The animation that ScrollTrigger is called stops when the top of this block meets the bottom of the viewport.

   end: "top bottom"

   As the rule says. 

2. The second try to call ScrollTrigger not working is because this already ended in the triggers in your first call.

3. About your scrollTrigger config.

   scrollTrigger: {
       trigger: ".section-1",
       start: "top top",
       endTrigger: ".section-3",
       end: "top bottom",
       pin: ".pin-inner",
       scrub: 1,
       markers: true
     }

   This works anyway as the animation starts at the top of section 1 and ends at the top of section 3. 

4.  I'm not sure if it is really to make something with .pin because he accepts only Element | undefined. It means should be a method as unpin: '.something'. But looks like GSAP does not have something like this.

5. So if you trying to pin the element. Your HTML should look like this:
    

   <section class="SECTION flex w-full flex-col">
     <div class="w-full h-screen bg-green-400"></div>
     <div class="w-full h-screen bg-red-400"></div>
     <div class="w-full h-screen bg-yellow-400"></div>
     <div class="w-full h-screen bg-emerald-400"></div>
     <div class="w-full h-screen bg-purple-400"></div>
   </section>

   Then you can add in the js file as here:
    

   gsap.registerPlugin(ScrollTrigger);
   
   ScrollTrigger.create({
     trigger: ".SECTION",
     start: "top top",
     end: "bottom bottom",
     pin: ".pin-inner",
     markers: true
   });

   See the Pen abrGpEP by xhideakix (@xhideakix) on CodePen

   
   
   If you look at the marker's position you will see what they now should be good.  And the ".pin-inner" element is pinned on the page.

6. But looks like this not what are you expected. So the next example is demonstrating what you expect. As above we can't unpin the .pin property.  But this example demonstrates what actually will be if you unpin that:
    

   <!--HTML-->
   <main>
     <section class="SECTION reletive flex w-full flex-col">
       <div class="pin-inner fixed flex w-full h-screen justify-center items-center">
         <h1 class="text-5xl text-[#000] font-bold">Pinned</h1>
       </div>
       <div class="h-screen w-full section-1 bg-green-400"></div>
       <div class="h-screen w-full section-2 bg-red-400"></div>
       <div class="UNPIN h-screen w-full section-3 bg-yellow-400"></div>
       <div class="h-screen w-full section-4 bg-emerald-400"></div>
       <div class="h-screen w-full section-5 bg-purple-400"></div>
     </section>
   </main>

   //JS
   gsap.registerPlugin(ScrollTrigger);
   
   gsap.to(".pin-inner", {
     scrollTrigger: {
       trigger: ".UNPIN",
       start: "top bottom",
       markers: true
     },
     position: "static"
   });

   See the Pen YzbLZGp by xhideakix (@xhideakix) on CodePen

   
   
   So if you anyway want to unpin that you should expect something like this. The element is back to the start position. I guess this is not what you want.

7. You can try the use gsap.timeline() and make something like this:
    

   <!--HTML-->
   <main class="flex w-full h-screen flex-col">
     <section class="reletive sections flex w-full flex-col">
       <div class="PINED__ELEMENT fixed flex w-full h-screen justify-center items-center">
         <h1 class="font-bold text-5xl text-[#ffffff]">Pinned</h1>
       </div>
       <div class="w-full h-screen  bg-green-400"></div>
       <div class="w-full h-screen bg-red-400"></div>
       <div class="UNPINED w-full h-screen bg-yellow-400"></div>
       <div class="PINED w-full h-screen bg-emerald-400"></div>
       <div class="w-full h-screen bg-purple-400"></div>
     </section>
     </section>
   </main>

   //JS 
   gsap.registerPlugin(ScrollTrigger);
   
   const tl = gsap.timeline();
   
   tl.to(".PINED__ELEMENT", {
     scrollTrigger: {
       trigger: ".UNPINED",
       start: "top bottom",
       markers: true
     },
     display: "none"
   });
   
   tl.to(".PINED__ELEMENT", {
     scrollTrigger: {
       trigger: ".PINED",
       start: "bottom bottom",
       markers: true
     },
     display: "flex"
   });

   See the Pen ZENopbw by xhideakix (@xhideakix) on CodePen

But actually, I'm not sure which behavior you are expecting. Hope this can help find to solution.

Thanks!
Hideakimaru
 

[Rodrigo]

Hi,

 

You can definitely pin the same element more than once. As an FYI you can't mix the pin type or pinSpacing. Your demo has a fundamental design flaw though, the section you're pinning has the screen height, so it gets pinned by the first ScrollTrigger, then normal scroll resumes and it goes above the fold and then gets pinned again. So the element becomes pinned twice as expected, but the second time you can't see it because is not on the viewport, is above the viewport. See the problem? You should tinker with your HTML/CSS in order to achieve what you're aiming for.

 

@Hideakimaru, thanks for helping out in the forums! Is great to see the community engaged and giving a hand! 💚. Just be careful with this approach:

const tl = gsap.timeline();

tl.to(".PINED__ELEMENT", {
  scrollTrigger: {
    trigger: ".UNPINED",
    start: "top bottom",
    markers: true
  },
  display: "none"
});

tl.to(".PINED__ELEMENT", {
  scrollTrigger: {
    trigger: ".PINED",
    start: "bottom bottom",
    markers: true
  },
  display: "flex"
});

You shouldn't nest ScrollTrigger instances inside a child instance of a Timeline, as stated in the docs this could create unexpected logical issues:

https://gsap.com/resources/st-mistakes#nesting-scrolltriggers-inside-multiple-timeline-tweens

 

Happy Tweening!

[shalildev]

Is it possible to kill the scrolltrigger before I get to the second one and reinstate it when scrolling back, as in that the scrolltriggers are toggling on and off? @Rodrigo

[Rodrigo]

Definitely, but that could create some scroll jumps, you should look into the disable and enable methods:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/disable()

https://gsap.com/docs/v3/Plugins/ScrollTrigger/enable()

 

I'm not sure of what you're trying to do, but disabling and enabling, or killing a ScrollTrigger instance doesn't sound like the best approach in this case. Maybe pin the element using pinSpace false and use a second ScrollTrigger instance to tween the opacity.

 

Unfortunately I don't have time to create a demo for you, especiallly considering that I'll be guessing what you're trying to do here.

 

Hopefully this helps.

Happy Tweening!