Jump to content
GreenSock

Craig Hildrew

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

Go to solution Solved by Craig Hildrew,

Recommended Posts

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

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Excellent - so you're all set? 

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Ahh nice, appreciate the steer on that one,


 

Edited by Craig Hildrew
Found a typo in my code, remedied the odd behaviour
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.
×