Jump to content
Search Community

Pinned element affecting start values of other Scrolltriggers

gmullinix test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

I have a project with a bunch of panels, all stacked vertically. There are images inside some panels that animate via Scrolltriggers attached to that panel.


There is also one fancy panel that gets pinned, content inside it animates horizontally, then the panel unpins at the end. However, I don't want the fancy panel to visually separate from the panels above and below it, so I made its Scrolltrigger pin the entire main_wrapper, with some custom math to determine the start pin location.


However, this breaks the Scrolltriggers for panels underneath the fancy panel. In the codepen, you will see the red squares in panels #B and #C animate even though they are not at "top 0%". I'm assuming pinning the main wrapper is causing the issue.


You can also see some commented out code that fixes the problem, but there's a whole function involved with extra steps to get the correct math. In my actual project, I have 20+ divs to animate below the fancy one, and would prefer to not customize a start function for all of them.


Any suggestions on how to fix this code so

a) all of the panels stick together on the screen, and

b) the panels under the fancy panel animate at the appropriate start point?


Thank you for your time!


See the Pen abZBxbG by gem0303 (@gem0303) on CodePen

Link to comment
Share on other sites

Had a bug report from a user on a 4K monitor who has the Windows OS zoomed/scaled. When he reaches the horizontal scroll section, the entire screen starts to shake. It appears that a scrollbar is rapidly appearing and vanishing on the #main_wrapper (the pinned div). If he turns off the Windows OS zoom, the problem goes away. The issue only happens in Chrome, not Firefox. He had the most current versions of both browsers. The problem also went away if I pin just the horizontal scroll section, though the effect isn't as nice (the panels don't stick together). 


Have you encountered bugs like this before? Any suggestions or theories on how to fix it for Chrome?

Link to comment
Share on other sites

Does the user have a regular monitor that they can try the same thing on? It'd be helpful to know if it's an issue with high res monitors or just the zoom/scaling. 


Also when you say "zoom/scaling" do you mean like CTRL + or do you mean changing the Windows display settings?


I haven't heard of an issue like this before.

Link to comment
Share on other sites

It appears to be the OS scaling specifically. I was able to recreate the shaking effect in my project by scaling my display to 150% and viewing it in Chrome.


Unfortunately, only my project breaks. Your Codepen works fine. I spent a few hours debugging and trying to pinpoint what is causing the error in my project, but was unable to isolate a specific cause. I have a lot of element and div heights based on vw and %ages, so perhaps that is the culprit.


I also figured out if I set the #main_wrapper's overflow-y to hidden, it hides the issue since the extra scrollbar will never appear.


Link to comment
Share on other sites

  • 1 year later...
On 10/22/2020 at 11:49 PM, ZachSaucier said:

Hi guys. I just ran into the same issue here ... that is the pinned scrolltrigger messes up the start positions noticably of all the scrolltriggers below. From what I have seen here, the suggestion is to split the scrolltrigers into A) the one above and B)+C) the the ones below ( for which you suggest to calculate a special offset/value fot the start values ). Since some time has passed, perhaps you have come up with some other solution. The problem is that I keep the start values for all the animations the same across the whole website, and it would be neat to keep them that way for the clarity's sake. Thanks for tips in advance, Best, P.


Link to comment
Share on other sites

Hello Pete


54 minutes ago, Pete K said:

Since some time has passed, perhaps you have come up with some other solution.


Yes, in June 2021 with the release of GSAP 3.7.0, the pinnedContainer property was added to ScrollTrigger, that helps with those subsequent ScrollTriggers inside that same pin-spacer. Here it is working with the demo from the OP. If it doesn't work for you, a minimal demo of your scenario would be highly appreciated. I hope it works for you, though.


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. (added in 3.7.0)


See the Pen VwraKWB by akapowl (@akapowl) on CodePen




On another note:


In the current version 3.9.1 there is a regression for .from() tweens - that's why I added a lazy: false to them, to make them work properly.


If you are going to use .from tweens, other suggestions to work around that regression for now would be to either wait for the next release, use the latest beta-file in the meantime or step back to version 3.8.0.



  • Like 1
Link to comment
Share on other sites

Your issue actually has a very different reason, @Urs


Neither will your trigger elements end up within the same pin-spacer as in the original problem, nor do you make use of .from()-tweens as with regard to that regression mentioned.


The problem is, this:

while technically you are right creating your progress scrollTrigger first, as it is the first element on the page and it is always best to create your ScrollTrigger in order of appearance of their trigger elements on page, this is also what's the cause of the issue you are experiencing because the progress scrollTrigger has no chance of knowing about the pinning-duration of that pinning ScrollTrigger that is created afterwards.


Here are some options for you:

either create that progress ScrollTrigger last (or at least after all the pinning) or keep it where you have it and add a refreshPriority: -1 to it instead


This page of the docs has some more insight.





See the Pen RwjadWG by akapowl (@akapowl) on CodePen

  • Like 4
Link to comment
Share on other sites

  • 10 months later...

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.
  • Create New...