Trigger is pinned element, at certain mark progress do something

[Rich Philben Cuer]

I have two scrolltriggers. One is for pinning, the other one is responsible for animating a timeline of tweens.
I want the second scrolltrigger to animate when the pinned element is at a certain amount of scroll.

How do I achieve this? I cant seem to figure it out, the trigger always starts after the pinned element has finished pinning.

See the Pen KKbOeGm by MetaRichi (@MetaRichi) on CodePen

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Rich Philben Cuer]

I have two scrolltriggers. One is for pinning, the other one is responsible for animating a timeline of tweens.
I want the second scrolltrigger to animate when the pinned element is at a certain amount of scroll.

How do I achieve this? I cant seem to figure it out, the trigger always starts after the pinned element has finished pinning.

[mvaneijgen]

Hi @Rich Philben Cuer welcome to the forum! 

 

There is no need to create a new topic, you can just keep replying to the same topic as before and just tell us you've created a minimal demo.

 

As you can see in your demo the makers are not aligned, if you want things too start at the same time you have to make sure that the markers are in the same place. 

 

So that is what I've done in the pen below, both ScrollTriggers have the same start and end points, now they start at the same point and end at the same point. The end could be different for the animation (I've given your ScrollTrigger ID's, so we can see which markers are from that ScrollTrigger), but because the ScrollTrigger has toggleActions, this doesn't really matter in this case.

 

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

 

If that is what you are looking for, there isn't even a need for the  pinning ScrollTrigger, It could just be all handled in one ScrollTrigger! Hope it helps and happy tweening! 

 

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

 

 

[Rodrigo]

Hi,

 

On top of Mitchel's great advice you can always use the previous() method in order to get the previous ScrollTrigger instance's start/end point and use that as a reference:

const switchTL = gsap.timeline({
  scrollTrigger: {
    trigger: ".pink",
    start: (self) =>  self.previous().start * 1.5,
    end: (self) =>  self.previous().end - 100,
    toggleActions: "play none reverse reverse",
    markers: { indent: 200 }
  }
});

Hopefully this helps.

Happy Tweening!

[Rich Philben Cuer]

Hi thanks for replying I really appreciate it. The thing is i wanted the animation to start mid way not exactly at the same time the ".pink" element gets pinned. So I made the starting point "1.5" not top top. How do I do that?

[Rich Philben Cuer]

Hi @Rodrigo,  if I do this?

Is this relative to the trigger element? or is this tied to the amount of document scrollable area.
I was wondering if I need to add "+=" at the start.

Which when I did it didnt work.

This is also my first time using this method. I'm assuming it refers to the previous scrolltrigger that was created before this. But in cases where its not necessarily the previous one how do I access that starting value of that scrolltrigger?
 

start: (self) =>  self.previous().start * 1.5,

[mvaneijgen]

All I've done is reverse the order of your ScrollTriggers and now they work as expected. 

 

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

 

7 hours ago, Rich Philben Cuer said:

But in cases where its not necessarily the previous one how do I access that starting value of that scrolltrigger?

If you make a variable of your ScrollTrigger you can call it by that name and then log it values eg myScrollTrigger.start, check at the bottom of the JS code. 

 

Hope it helps and happy tweening!