Jump to content

Soufiane LASRI

Scrolltrigger can't refresh the start value of an element inside a pinned parent

Go to solution Solved by Cassie,

Recommended Posts

Hi GSAP team,

First of all, thanks again for your work,

I'm trying to achieve a specific effect for a project
I have sections which look like tiles. When we scroll, the next tile is pinned under the current one and then scrolls naturally with the page once the "tile" is fully shown.

Like if you have a deck of cards in your hand and you remove them one by one by pushing them to the top.


But inside one tile, I have another Scrolltrigger (the black container in the Codepen) and its start value is calculated "well" but as the tile is pinned for one moment, the start value becomes wrong and I would like to recalculate it but it looks like Scrolltrigger cannot do that


Do you have an idea of how I can manage this use case?


I did a Codepen to show my issue, the markers are supposed to stick to the top and the bottom of the black box


Bonus question: I don't understand why the last ".content" background is cut?


Cheers 🫰

See the Pen VwBVLpv?editors=0110 by SoufianeLasri (@SoufianeLasri) on CodePen

Link to comment
Share on other sites

Me again,


I've found a workaround which works
Instead of creating the black container Scrolltrigger at page load, I create it inside the `onLeave` of the pinning Scrolltrigger

But I wonder if there is a better solution

Link to comment
Share on other sites



Could you explain what you're trying to achieve with the position sticky element?

This bit of code isn't doing anything at all. It's just adding some markers, but there's no animation or pinning at all associated with it.

  trigger: ".article",
  start: "top top",
  end: "bottom bottom",
  markers: true,
  refreshPriority: 20


Link to comment
Share on other sites

Hey @cassie


For my project I need this Scrolltrigger to do some animations and stuffs, but in my Codepen example I simplified the code so it just adds markers

I need the markers to be placed at the top and the bottom of the black container.

Right now they're floating in the page but not following the black container, because the black container stops scrolling for a moment when its parent get pinned, so the calculation of the top and the bottom are "wrong"


I hope this is more clear

  • Like 1
Link to comment
Share on other sites

  • Solution



Thanks for that. You're after pinnedContainer

pinnedContainer Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. Important: nested pinning is not supported, so this feature is only for non-pinning ScrollTriggers (added in 3.7.0)


You have a strange 200px gap at the bottom because of your start values which were adding a 200px offset. Here you go, like this?

See the Pen LYBXQbw?editors=1010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey @Cassie


Wow thanks a lot for this solution, I missed this parameter when I was reading the documentation

That works like a charm 🙌



  • Like 2
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.