Pinning an image for the duration of a dynamically sized list in GSAP

[Tulip781]

Hello folks,

 

I'm working on a project where I need to pin an image for the duration of a list's scroll. The challenge I'm facing is that the list has a dynamic height, which can change based on content. I'm unsure how to set the pin duration for the image when the list height isn't known in advance.

 

Could you provide any guidance or pointers on how to approach this? Specifically, how can I calculate the duration to pin the image based on a list with an unknown and variable height? 

 

Also, any tips on handling image changes during both upward and downward scrolls would be greatly appreciated. At the moment it seems to only work one way.

 

Thank you in advance for your help!

 

See the Pen GReRyZX by indymoguler (@indymoguler) on CodePen

[Toso]

hi @Tulip781 i think this video is a good starting point 

 

 

 

[Tulip781]

Toso, thanks for sharing. I will check this out now

[Tulip781]

In this example there is a known height for the list item (300vh), so it easier to know when to unpin the image.

[akapowl]

Hello there, Tulip.
 

2 hours ago, Tulip781 said:

Could you provide any guidance or pointers on how to approach this? Specifically, how can I calculate the duration to pin the image based on a list with an unknown and variable height?

The best pointer IMO is what the documentation says about that:
 

Quote

   
    end
 

String | Number | Function - Determines the ending position of the ScrollTrigger.
 

It can be any of the following:

• String - Describes a place on the endTrigger (or trigger if one isn't defined) and a place on the scroller that must meet in order to end the ScrollTrigger. So, for example, "bottom center" means "when the bottom of the endTrigger hits the center of the scroller". "center 100px" means "when the center of the endTrigger hits 100px down from the top of the scroller" (assuming vertical scroll). You can use keywords like "top", "bottom", "center" (or "left" and "right" if horizontal: true) or percentages like "80%" or pixel values like "100px". Percentages and pixels are always relative to the top/left of the element/viewport. You can also define a single relative value like "+=300" which means "300px beyond where the start is", or "+=100%" means "the height of the scroller beyond where the start is". "max" is a special keyword indicating the maximum scroll position.

 

Quote

   
    endTrigger
 

String | Element - The element (or selector text for the element) whose position in the normal document flow is used for calculating where the ScrollTrigger ends. You don't need to define an endTrigger unless it's DIFFERENT than the trigger element because that's the default.
 

So you could e.g. try styling your list so it matches the height of its content in the first place, e.g. and then setting your list as the endTrigger element and the end to something like 'bottom center'; which would translate to something like 'end the pin when the bottom of the list hits the center of the viewport'. 

Or use a specific class on your last item as the endTrigger with an end as described as above; or use a CSS-selector like '.list p:last-of-type' maybe for the endTrigger with an end as described as above ... you have a quite a few options there.

You might need to add some extra offset along the way to your end to entirely get to the result you need or want (like if you maybe want the end-point to exactly align with the bottom edge of that image for example); which you could e.g. do like so:
 

end: 'bottom center+=100px' // or whatever value might represent half of the height of that image e.g.

If you don't know the value of something beforehand, you can always get it via JS
 

end: () => 'bottom center+=' + (document.querySelector('.smiley').offsetHeight / 2)

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

Make sure to use the value as a function-based value then (alongside invalidateOnRefresh: true) to make it properly re-calculate with changes on resize.

I would suggest tinkering around with all the options you have there - and best set markers: true for that so you can see what exactly is doing what.
 

2 hours ago, Tulip781 said:

Also, any tips on handling image changes during both upward and downward scrolls would be greatly appreciated. At the moment it seems to only work one way.

The reason it only works when scrolling down is that you only implemented logic for it in an onEnter callback - so if you want to have it also work in the other direction, you'll want to have a look at the other callbacks too (besides onEnter there are onLeave, onEnterBack and onLeaveBack - all explained in more detail in the documentation) and add accompanying logic to those too.

Getting that right can become a bit tricky though, expecially if you're not too familiar with things yet, and depending on how exactly you want things to behave. If you're looking for a clean approach to change the background-color e.g. you could have a look at this nice example posted by @Rodrigo in a different thread recently.
 

 

[PointC]

Did something similar here:

See the Pen zYRyveM by PointC (@PointC) on CodePen

 

Maybe it'll spark some ideas for you. Happy tweening.

[Tulip781]

oh wow! Thanks for all the replies, really appreciate the detail. I'm going to revisit my code pen to see if I can solve using the above references for inspo.