Jump to content
GreenSock

amit95

Stumped, pin section throws off ScrollTrigger start positions for other elements

Recommended Posts

On my page, I have two ScrollTriggers:

 

  1. .pinnedBGText which pins
  2. .formBanner which changes BG colour when the element is in view

 

Currently, on my local site, the start marker for .formBanner is off (it's higher than it should be). So, I started investigating and thought maybe images loading in are throwing the marker positions off on load. To test, I remove all images on the page and created a minimal page which contains just 3 modules:

 

  1. .pinnedBGText
  2. A spacer module
  3. Then the .formBanner module

 

This way, I could test if anything was effecting the start position, and it was still occurring. To see this issue in effect, please see the GIF.

 

In the GIF, you will see that the 3rd module (the .formBanner) already has a yellow BG, which it shouldn't until it's in view. In the GIF you will also see that the start marker is off (I'm hovering over it at the end of the GIF).

 

When I remove the following line pin: container from my .pinnedBGText ScrollTrigger, the start markers are correct. However, to test it further, I created a codepen to emulate the issue. But, to my surprise, the markers were all correct. See demo below:

 

https://cdpn.io/pen/debug/bGMvRam?authentication_hash=VJrxxRpWObWr

 

The JS in the Pen and local is the same so unsure why there's a difference in performance.

 

I've tried to refresh ScrollTrigger when the .formBanner is in view, but the start markers appear before the module is in view, so it's practically useless.

 

I've also tried playing around with the end parameter to see what works / any differences, but couldn't get the triggers to work correctly.

 

Any ideas on what could be causing this issue?

 

Edit, forgot to add GIF:

 

hCiL3QW.gif

 

See the Pen bGMvRam by amit_rai95 (@amit_rai95) on CodePen

Link to comment
Share on other sites

Hi,

 

This could be related to the fact that things in your local environment are running faster than normal which can be expected though. Have you tried in devtools using network throttling to slow down the local requests and see what happens?

 

I noticed that you're using rather outdated versions of GSAP and ScrollTrigger (3.9.1), you should try to update those in order to see what happens.

 

Also I'm curious about those conditional statements you have in your code:

if(document.querySelector(".pinnedBgText")){
  //...
}

if (document.querySelector(".formBanner")) {
  //...
}

You've always had those in your code or you added them to test things after seeing this issue?

 

I'd like to point out as well that in this code:

gsap.to(".formBanner", {
  scrollTrigger: {
    trigger: ".formBanner",
    toggleActions: "play none none reverse",
    anticipatePin: 1,
    invalidateOnRefresh: true,
    start: "top center",
    endTrigger:"html",
    end:"bottom top",
    markers: true,
    toggleClass: "formBanner--active"
  },
  backgroundColor: gsap.getProperty("html", "--yellow")
});

There is no need for anticipatePin or endTrigger, especially since the end trigger is the html tag. If you check the markers you'll notice that the end marker never reaches the top of the viewport and it will never do, since it's the html tag. I doubt those have any effect in your issues, but they could leave to some confusion.

 

Finally have you tried a production build running on a real server or your local machine?

 

Sorry I can't be of more assistance, but since is something that can't be replicated on an editable example this is pretty much all I can think that could be causing the problem.

 

Happy Tweening!

Link to comment
Share on other sites

Hi @Rodrigo,

 

  • I haven't looked into devtools yet, but will do. I couldn't find many threads on the matter (besides this), so assumed there must be something glaring I've missed / incorrect logic. Although, I have tried Scrolltrigger.refresh() on page load to see if it fixed it (it didn't) 
  • Good spot on the GSAP version. I was locally running version3.11.0, but have an older CDN version in my pen. I have now upgraded to 3.11.2 and can confirm the issue still persists.
  • Regarding the conditional statements, they've always been in. These are part of modules / components and all of the JS compiles into one single js file. So, to avoid gsap element not found warnings, I'm checking if the element exists beforehand.
  • Regarding anticipatePin and  endTrigger, I followed this approach from this thread. Though, the anticipatePin property definitely doesn't make sense now that I see it.

No need to apologise, appreciate any advise given. I know the demo isn't helpful to showcase the issue, was more to gauge avenues as to why it isn't operating correctly on other envs.

Link to comment
Share on other sites

Hi @amit95. Things loading faster/slower shouldn't really matter. ScrollTrigger automatically calls .refresh() both on "DOMContentLoaded" and "load" events, so unless you're dynamically loading things in after the "load" event that'd shift layout around, you should be fine. 

 

As for why the markers are inaccurate, that's super difficult to diagnose blind. if you can recreate the problem in a simple demo, we'd be happy to take a peek. You may also want to try using the latest beta just to see if it resolves anything for you: 

(Clear your cache to make sure you're getting the latest stuff)

Link to comment
Share on other sites

Hi @GreenSock,

 

Believe me, I've been trying to recreate the issue in Codepen for a while, first time I cannot recreate an issue that is happening locally 🥲 

 

I can confirm, I'm not loading anything dynamically, it's just a simple pin. I can also confirm the issue still persists on the new beta version.

 

The best way I can describe the issue, is that the markers for .formBanner ScrollTrigger moves before the .pinnedBGtext section has unpinned.

 

It's like the height of the invisible elements in the pinned module are causing the calculations to be off? Having said that, I have completely removed the text animation snippet from the pinned module, and the issue still persisted.

 

I will continue trying to get a pen up that shows the actual issue. However, in the meantime, if you'd like to see the issue on a webpage, please see here.

 

On the above page, you'll be able to see that the "start" marker has already moved up before the section has unpinned.  The start marker should be on the .formBanner element.

 

The JS on the webpage is the same as in the codepen demo (which is why I'm stumped on its mixed results).

Link to comment
Share on other sites

9 minutes ago, amit95 said:

Believe me, I've been trying to recreate the issue in Codepen for a while, first time I cannot recreate an issue that is happening locally 🥲 

Yeah, there must be something different in your local environment. I wonder if you've got an old version of GSAP cached in your build tool. 🤷‍♂️ Your live site is definitely using an old/stale version (3.11.0). I'd strongly recommend updating. Unfortunately we just don't have the resources to troubleshoot a live site (too many factors and we can't poke around and make changes)

Link to comment
Share on other sites

@GreenSock - Of course :) The preview was more to showcase the issue in web form (rather than just a GIF). Will continue trying to emulate into a codepen.

 

In relation to GSAP versions, I did previously upgrade to 3.11.2 via npm, but encountered bugs (such as the one I posted about here).

 

I know you have fixes in place for 3.11.3 beta, but naturally this isn't available via npm yet, and I do not want to use 3.11.2 because of the bugs. So, I'm essentially waiting for version 3.11.3 to officially be released so I can upgrade locally, via npm. 

 

Would you know when the official release would be?

Link to comment
Share on other sites

We definitely want to push 3.11.3 out soon but I cannot give you a date. We do give advanced access to "Shockingly Green" and higher Club GreenSock members by request (I could get you a zip with a .tgz file that you could npm install). Let me know if you've got a membership under a different account or something. 

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.
×