ScrollTrigger pinned element far below where it should be

[Jon Kolko]

Hi,

 

I have a problem that I think is caused by my fundamental misunderstanding of start/end. Please see CodePen:

 

You'll see that the ScrollTrigger is set to start when .blueSection scrolls into view, but appears to start well before that (and therefore end in the wrong place.) 

 

The intended outcome is that the boxes do not move until the blue area appears at the bottom of the screen, and they stop moving when the bottom of the blue area appears at the bottom of the screen.

 

Thanks,

 

 

 

See the Pen RwJXPjW by jkolko (@jkolko) on CodePen

[mvaneijgen]

19 hours ago, Jon Kolko said:

The intended outcome is that the boxes do not move until the blue area appears at the bottom of the screen

So I've set your ScrollTrigger to trigger when the bottom of the screen hits the bottom of the .blueSection. eg start: "bottom bottom"

 

19 hours ago, Jon Kolko said:

and they stop moving when the bottom of the blue area appears at the bottom of the screen.

This is the same as the first sentence. You could set it the same, but that means the animation time is over a scroll distance of 0px which makes everything snap as soon as you hit the trigger. I think that is not correct?

 

I've just set it so that when the top of the browser hits the top of .blueSection the animation will be done. Getting these properties right for every specific animation can be really hard. You just have to play with the values until it feels right, but remember that the first parameter ("First Second") sets the trigger to the element and the Second sets it for the browser. Hope it helps and happy tweening! 

 

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

[Jon Kolko]

Hi,

Quote

and they stop moving when the bottom of the blue area appears at the bottom of the screen.

This is the same as the first sentence. You could set it the same, but that means the animation time is over a scroll distance of 0px which makes everything snap as soon as you hit the trigger. I think that is not correct?

 

I didn't do a very good job of writing that and left out an important word. I meant,

 

The intended outcome is that the boxes do not move until the top of the blue area appears at the bottom of the screen, and they stop moving when the bottom of the blue area appears at the bottom of the screen.

 

But,

 

start: "top bottom",
end: "top 27%",

and

start: "top bottom",
end: "bottom bottom",

Seem to do the same thing (but not what I want)...

 

Thanks,

 

 

 

[mvaneijgen]

I see I had linked the wrong pen in my previous comment, that is now updated.

 

1 hour ago, Jon Kolko said:

the boxes do not move until the top of the blue area appears at the bottom of the screen

I think you then need two ScrollTriggers, because you pin the .blueSection gets pinned, so it doesn't move when it get triggered. You surely can do that, but the box will not be visible when scrolling.

 

Here is it with being pinned

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

 

and here one not being pinned

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