Pushed content below the panels causes jank

[xoxoxoxo]

I have a div that I would like to push below the last panel. I'm getting Scrolltrigger's end value and adding that to margin top value.

However, on Safari and Chrome I get a "gap" on scroll between the last panel and the div that's pushed to the bottom.  It almost feels like the last div isn't "catching" up to the panel that's being transformed.

Not sure how to solve this.

See the Pen mdPZzGG by nullhoooook (@nullhoooook) on CodePen

[ZachSaucier]

Hey nullhook. I don't see any gap in Safari or Chrome. What gap are you talking about?

 

In general it's best to let the DOM, CSS, and ScrollTrigger position things and not try to set explicit positions yourself. Why do you think this approach is necessary?

[xoxoxoxo]

Basically i'm trying to have a div which would follow the last panel (purple) as the normal flow.
If I don't add an explicit position then the div sits on top as my container is position absolute. Also this div can be of any height.

If I don't explicitly position it then this is how it would look: 

See the Pen jOrEbVJ?editors=0010 by nullhoooook (@nullhoooook) on CodePen

[ZachSaucier]

Why not pin it?

See the Pen wvWBMVo?editors=0100 by GreenSock (@GreenSock) on CodePen

[xoxoxoxo]

I can't pin it because I want the div to scroll normally following the last panel. If you look at my initial codepen you can see how this works.

Is there no way to achieve this without explicitly positioning the div as per my initial example?

[xoxoxoxo]

@ZachSaucier I've created the issue I was having here: 

See the Pen XWKJRbP?editors=1000 by nullhoooook (@nullhoooook) on CodePen

Look at the last image panel which has a gif and then look at the div that follows, you can see it's laggy and it takes time to "catch up" with the last panel.

If you still can't see it I can attach you a video. It's even worse on Safari.

[ZachSaucier]

10 hours ago, nullhook said:

I can't pin it because I want the div to scroll normally following the last panel.

Then just include it as part of the last panel section that you have.

[xoxoxoxo]

Your suggestion worked. However, when my scroll reaches to the white div it just scrolls super fast. How can I take the height of the div in consideration? given that it can be more than 100vh, depends on the content.

 

Forked: 

See the Pen abZzxqq?editors=1010 by nullhoooook (@nullhoooook) on CodePen

[ZachSaucier]

Well you are currently using the entire panel height as the distance but using a hard coded end value based on the viewport height. So you should probably adjust the end position of the ScrollTrigger to include the height of the content after.

[xoxoxoxo]

I'm sorry, what do you mean? Do you mean to append offsetHeight of the div inside the end function? I'm confused.

[ZachSaucier]

.to(panel, { yPercent: -100 });

The above moves the content based on the total height of the last section.

end: () => `+=${panels.length * 2 * 100}%`

The above moves the content based solely on the viewport height.

 

You need to change the end value to use the actual height of at least the last section since you're increasing it. Exactly how you should change it depends on the way you want it to feel.

[xoxoxoxo]

I tried getting the last section's height and adding to the whole Scrolltrigger, however If you notice when scrolling to the last section it quickly jumps...
Do you know why this jump happens? 

Tried your suggestion here: 

See the Pen abZOdJy?editors=0010 by nullhoooook (@nullhoooook) on CodePen

[xoxoxoxo]

@ZachSaucier Any help with the jump issue above? highly appreciate your input here.

[ZachSaucier]

It's a matter of the distance you're telling it to animate over the distance it is animating over. Frankly this is not an issue in GSAP so I don't really have time to fix it for you.

[xoxoxoxo]

Any references or examples you can point me to?