ScrollTrigger - aligning start and end triggers to the same point

[Jonny24]

Hey, so only been using GSAP since last week but already having a blast with it! I'm playing around with ScrollTrigger to create a fade in / fade out effect on cards and as you can see in the Codepen link it all works as expected using the next cards height as an end point. Firstly, is this right way to get the start and end trigger points aligned so that the next trigger starts at the same point as the previous end trigger? Secondly, I'm using the same code from Codepen on the site I'm working on, but it doesn't line up as nicely as the Codepen example, any reason why? Attached a photo of the misalignment.

 

Any suggestions are welcome!

 

EDIT / P.S when the div is wrapped in the ScrollTrigger wrapper it cancels out any :nth-child CSS selector (was using it to reverse the card layout), any ways around this without making another class selector?

 

 

See the Pen WNwObMy by johnmarsden24 (@johnmarsden24) on CodePen

[GreenSock]

7 hours ago, Jonny24 said:

Firstly, is this right way to get the start and end trigger points aligned so that the next trigger starts at the same point as the previous end trigger?

I'm not really sure what you're asking, sorry. If you want it to stay pinned for the same distance as the height of the card, yes, that sounds correct. 

 

If you want the end of one ScrollTrigger to line up perfectly with the start of another, you can just use the same values. For example:

// first ScrollTrigger
endTrigger: "#card2",
end: "center center",
...

// second ScrollTrigger
trigger: "#card2",
start: "center center"
...

 

7 hours ago, Jonny24 said:

I'm using the same code from Codepen on the site I'm working on, but it doesn't line up as nicely as the Codepen example, any reason why?

Unfortunately, it's impossible for us to troubleshoot blind. You'll need to provide a minimal demo of the "broken" one for us to see what's going on. 

 

7 hours ago, Jonny24 said:

when the div is wrapped in the ScrollTrigger wrapper it cancels out any :nth-child CSS selector (was using it to reverse the card layout), any ways around this without making another class selector?

If I understand you correctly, yeah, you'll need to adjust your selector. Pinning requires that your original element is nested inside a container element. Should be pretty straightforward, but let us know if you need more help and we'd be glad to look at a minimal demo. 

 

Cheers!

[Jonny24]

On 8/29/2020 at 12:11 AM, GreenSock said:

I'm not really sure what you're asking, sorry. If you want it to stay pinned for the same distance as the height of the card, yes, that sounds correct. 

 

If you want the end of one ScrollTrigger to line up perfectly with the start of another, you can just use the same values. For example:

// first ScrollTrigger
endTrigger: "#card2",
end: "center center",
...

// second ScrollTrigger
trigger: "#card2",
start: "center center"
...

 

Unfortunately, it's impossible for us to troubleshoot blind. You'll need to provide a minimal demo of the "broken" one for us to see what's going on. 

 

If I understand you correctly, yeah, you'll need to adjust your selector. Pinning requires that your original element is nested inside a container element. Should be pretty straightforward, but let us know if you need more help and we'd be glad to look at a minimal demo. 

 

Cheers!

 

Thanks for that GreenSock! Ok so after a bit of playing around I found out the cause for the triggers to line up - some of the cards had text that has line breaks. I've recreated the issue on the same Codepen as above - I've got three batches of card; the first use the next card as an endTrigger, and the second and third use the next cards height. The third batch has some cards that have line breaks in their text which causes the trigger lines to become mismatched. Any ideas how to get them to be aligned when using line breaks?

 

Also the first batch, which uses the next card as an endTrigger, have a considerable overlap which is seen when decreasing the zoom of the Codepen view (thought it was working seamlessly until I tried it at 0.5x and 0.25x). If I set pinSpacing to true there's a large gap between the previous card fading out and the next card fading in which is why I'm using end and the next cards height.

 

Updated Codepen

[ZachSaucier]

1 hour ago, Jonny24 said:

The third batch has some cards that have line breaks in their text which causes the trigger lines to become mismatched. Any ideas how to get them to be aligned when using line breaks?

I'm not seeing any misalignment? Can you please be a little more explicit with what misalignment you're talking about?

 

1 hour ago, Jonny24 said:

the first batch, which uses the next card as an endTrigger, have a considerable overlap which is seen when decreasing the zoom of the Codepen view (thought it was working seamlessly until I tried it at 0.5x and 0.25x)

You mean using the buttons in the embed? Is there any issue when you actually zoom a page (not in CodePen or an embed)? You can use the debug view to check.

[Jonny24]

15 minutes ago, ZachSaucier said:

I'm not seeing any misalignment? Can you please be a little more explicit with what misalignment you're talking about?

 

You mean using the buttons in the embed? Is there any issue when you actually zoom a page (not in CodePen or an embed)? You can use the debug view to check.

 

Images will show you best what I'm trying to achieve. So in all the images I've circled in blue the trigger lines I'm on about. In the first image it shows what I want, the start and end triggers being perfectly aligned. The second image shows the misalignment when the text has line breaks and finally the third image shows the overlapping issue when using the next card as an endTrigger. All images were taken using the debug view you linked.

 

If I set a height to the card it fixes the misalignment problem as seen in the second image, but I'm hoping this can be resolved without doing that.

 

[ZachSaucier]

Thanks for that, it's very helpful.

 

The core of the issue is logical and unrelated to the <br>s. It has to do with your containers having a set height (the viewport height) but your content not always fitting in that height. (Edit: see post below) The <br>s just happened to make it tall enough to where the difference was visible. 

[Jonny24]

54 minutes ago, ZachSaucier said:

Thanks for that, it's very helpful.

 

The core of the issue is logical and unrelated to the <br>s. It has to do with your containers having a set height (the viewport height) but your content not always fitting in that height. The <br>s just happened to make it tall enough to where the difference was visible. 

 

You have to decide: do you want to restrict the height to the viewport's height? If so, use only that for your start and end positions. If not, don't restrict the height of the container to the viewport's height.

 

Thanks for the speedy reply Zach! I'm sorry I'm a bit slow on the uptake but which containers have a set height? The only ones I can see are those that GSAP creates when the item is pinned.

[ZachSaucier]

Sorry, I misspoke when I said a set height. Here's a more minimal demo that shows the issue more clearly: 

See the Pen bGpoYyd?editors=1000 by GreenSock (@GreenSock) on CodePen

[ZachSaucier]

I think this is what you're going for? I think it's easiest if you let ScrollTrigger do the calculations.

See the Pen yLOzpgz?editors=0010 by GreenSock (@GreenSock) on CodePen

[inzn]

Hey @ZachSaucier, I am having a similar issue. I want to clip-path on scroll when the top of my image is in the center of the viewport and stop when it's bottom is at the bottom. I have set markers but it seems the top marker is positioned below the image container and therefore it does not work. What might cause this to happen?

 

I've made a small codesandbox here: https://codesandbox.io/s/trusting-diffie-fv7y5l 

[OSUblake]

Hi inzn, 

 

Can you create another demo without Gatsby? I cannot get it to start up on CodeSandbox. And also be aware that we cannot provide support for 3rd party libraries on this forum. I've never heard of GScroll so I don't know if that's related. Thanks!

[saleem]

On 9/2/2020 at 4:47 PM, Jonny24 said:

can we make scrollable test card block in parent container not with opacity. means outer container height should be 500px and there three block scrollable in container.