Jump to content
Search Community

ScrollTrigger - Adjusting enter/leave position with pinned content

RogerWest test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...