ScrollTrigger - Help pinning content to bottom of screen while parent element is in view

[Craig Hildrew]

Hey, Love your work Greensock!

 

I need a little guidance/ advice

The animations work as intended, the issue is regarding the text inside the left hand image panels; specifically  their behaviour when scrolling up the page. Effect is best seen on larger screen sizes

I'm using css flex & position sticky to "stick" them to bottom of their parent, greensock just reveals them at the correct time. All works on the way down, but as you scroll back up weird things happen to the positioning of the element. 

 

I'm hoping somebody has a simple solution, as it is very close using this approach.
Alternatively could use green sock to also handle the pinning

 

Many Thanks

See the Pen wvmZyJN by bluemonkey1130 (@bluemonkey1130) on CodePen.

[GreenSock]

First of all, thanks for being a Club GreenSock member, @Craig Hildrew! ?

 

Sorry for the late reply. I'm almost asleep at my desk (very late) so I'm having a tough time following all of what you're trying to do, but I definitely think it's a bad idea to use CSS position: sticky like this. I'd recommend using ScrollTrigger for pinning. Have you tried that? 

[Craig Hildrew]

Hi

I had tried it with greensock pinning, but as I was already pinning the parent image panel I thought it might be simpler to allow css to handle that bit if possible, it was quite close.

 

I've since made a couple simpler versions of what I'm trying to do, focussing on just the left image panel from the previous example, with the text element inside. I have had some success pinning the text element to the bottom of it's parent, see "Simple Pin" as good example of the kind of behaviour I am trying to achieve. However if I also pin the parent, see "Pinned Parent With Child" which is what I ultimately need to do. 

1. I've created a simple example with just the pinned text within the image panel 
2. And a second with the parent image also pinned 

Maybe I'm approaching it wrong, please let me know if thats a clear enough explanation.

 

SIMPLE PIN

See the Pen xxWvpeB by bluemonkey1130 (@bluemonkey1130) on CodePen.

 

PINNED PARENT WITH CHILD

See the Pen RwMXxqP by bluemonkey1130 (@bluemonkey1130) on CodePen.

[Craig Hildrew]

I think I have resolved the clash of pins

 

See the Pen KKoOxrX by bluemonkey1130 (@bluemonkey1130) on CodePen.

[GreenSock]

Excellent - so you're all set? 

[Craig Hildrew]

Yeah it's resolved, lesson pin siblings 

 

See the Pen WNzWJNZ by bluemonkey1130 (@bluemonkey1130) on CodePen.

[Craig Hildrew]

Hey Again,

I am having some issues with my layout when switching between sizes using ScrollTrigger.matchMedia.

 

I have some animations that trigger at   "(min-width: 1000px)" || "(max-width: 999px)" || "all"

The animations work correctly when loaded in a given view port, but when reducing the screen size below the 1000px mark the pinned text elements are not visible, but become visible is refreshed at that screen size.

I'm wondering if theres something that will trigger the refresh like behaviour on the switch between matchMedia cases. any help you can provide is much appreciated

 

See the Pen WNzWJNZ by bluemonkey1130 (@bluemonkey1130) on CodePen.

 

 

[GreenSock]

I would strongly recommend switching to the 3.11 gsap.matchMedia() - it's built into the core now and has an even better API. ScrollTrigger.matchMedia() is deprecated.

[Craig Hildrew]

Ahh nice, appreciate the steer on that one,

 

Edited September 2, 2022 by Craig Hildrew
Found a typo in my code, remedied the odd behaviour