Gsap Pin Image and change Content

[Azzie Fuzzie]

Hi GSAP Fellows,

Important click on the codepen edit cause it's only meant to work on desktop not mobile

I’m working on a menu section with a layout like this:

• Left: image wrapper with multiple stacked images (position: absolute)

• Right: scrollable text items (.menu__item)

Goal:

• Pin the image wrapper on desktop while scrolling through the text items.

• As each text item reaches the top, swap the image to the corresponding one.

• Only the image should be pinned; the text should scroll normally.

Current Behavior / Issue:

• I use ScrollTrigger to pin the image and trigger the opacity swap on text items.

• The pin works, but when the user reaches the bottom, the last text items’ images are not visible, because the pinned image’s height ends before all items have scrolled.
  Loom :https://www.loom.com/share/c4247969802b40c38167454d9343107b?sid=c7194c17-4fbf-4239-9f50-26692665071f
  Thanks alot!

See the Pen myeZaMQ by AzzieFuzzie (@AzzieFuzzie) on CodePen.

[mvaneijgen]

Hi @Azzie Fuzzie welcome to the forum! 

 

Your setup seems to work perfect, the only issue I see is that you have 5 images, but 7 items you're looking though, so the last to items don't have a corresponding image. 

 

Hope it helps and happy tweening! 

 

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

 

 

[Azzie Fuzzie]

Thanks  @mvaneijgen   I guess my question/query is, is  there a way to keep pinning the image without adding the extra space so that that corresponding image shows cause at the moment it cant hit the trigger if that makes sense so the text beside still scrolls when the image hit the the bottom of the last text item.

[Rodrigo]

Hi,

 

If you want to trigger this when the corresponding text hits the bottom of the image the only option is to offset the top position of the texts by the height of the image, because right now you have two text elements that are already past the start trigger so those onEnter callbacks are already executed, something like this:

See the Pen QwjeLbK by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[mvaneijgen]

Yeah, or set your triggers to the bottom instead of center, then when everything is done and you're scrolled to the bottom all the elements have triggered. 

 

For you scroll effect to work you would need to be able to scroll, if you can't scroll the scroll effect doesn't work. This seems logical to me and I don't know of a fix to have something happen on scroll, but not be able to scroll 🤷

 

Hope it helps and happy tweening! 

 

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