ScrollTrigger - Adjusting enter/leave position with pinned content

[RogerWest 0 Likes (Newbie)]

Hello!

I'm working on a scrolling section with pinned content that changes per section from this demo:

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

 

I have the base functionality working as intended, but I wanted to adjust the point in which the images change. Currently the image changes when the text on the left is vertically centered. This makes the image fade in later than it should for it's corresponding text.

 

I believe the issue is with.enter and .leave, but I'm still a bit too new to be able to debug this on my own. Ideally the fade in/out of the images should sync up more appropriately with the content as you scroll. Thank you in advance!

 

See the Pen gOjPRey by ddrw (@ddrw) on CodePen

[mvaneijgen 1,704 Likes (Superhero)]

Hi @RogerWest welcome to the forum! 

 

It has to do with the how the .outer panels are layed out in CSS. I've given them different background colors so you can beter see what is happening. As soon as an .outer panel hits the top of the browser it will change to the corresponding image.

 

If you want to change this effect I think the best cause of action would be to change the position in of the text in the panel via CSS. They are now vertically centered and in my demo I've removed the line  justify-content: center; from .video-slides .content .outer on line 39, to have them align to the top of the element. 

 

Hope it helps and happy tweening! 

 

See the Pen rNrxoBG?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[RogerWest 0 Likes (Newbie)]

2 hours ago, mvaneijgen said:

Hi @RogerWest welcome to the forum! 

 

It has to do with the how the .outer panels are layed out in CSS. I've given them different background colors so you can beter see what is happening. As soon as an .outer panel hits the top of the browser it will change to the corresponding image.

 

If you want to change this effect I think the best cause of action would be to change the position in of the text in the panel via CSS. They are now vertically centered and in my demo I've removed the line  justify-content: center; from .video-slides .content .outer on line 39, to have them align to the top of the element. 

 

Hope it helps and happy tweening! 

 

Thanks for the quick response! Seeing the sections in different colors definitely helped get me to what I was looking for with just CSS. Thanks again!