Scrolltrigger Start/End points shifted

[Davedo]

Hello,

I've been working on a personal site for the past few months. Everything worked fine. However since my last checks the Scrolltrigger responsible for the nav changing color didnt work well anymore.

Here is a link to my development environment: https://davidkathrein.webflow.io/ (markers are enabled).

The code responsible for the color change:
 

$(".trigger-dark-nav").each(function (index) {
  let triggerElement = $(this);

  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: triggerElement,
      // trigger element - viewport
      markers: true,
      start: "top top",
      end: "bottom top",
      scrub: false,
      toggleActions: "play reverse play reverse"
    }
  });
  tl.to(".navbar", {
    backgroundColor: "#3D3D3D4D",
    duration:0.1
  },0);
  
  tl.to(".navbar-container", {
    color: "#FFFFFF",
    borderColor: "#7B7B7B",
    duration:0.1
  },0);
  
  tl.to(".navbar-links-menu", {
    color: "#FFFFFF",
    duration:0.1
  },0);
  
 	tl.to(".navbar-cta-wrap", {
    color: "#AABDFF",
    duration:0.1
  },0);
});  

Explanation of the situation:
On my page i have multiple "dark-sections", those have the class "trigger-dark-nav". As mentioned earlier since the last month every Scrolltrigger seems shifted. Which makes the nav color change seem random. I have already tried refreshing them at the bottom of the body aswell as triggering a Scrolltrigger.refresh() on the first "trigger-dark-nav" element - which didn't work aswell.

Thanks for your help in advance!
David

PS: if any more code or informations are needed, let me know. I will check this post regularly.

[GSAP Helper]

Hi there, @Davedo. Are you saying that you changed something on your site and now things aren't working properly? Or are you saying you updated the GSAP version or something like that? Sorry, I read your post a few times and I'm not quite sure what you're asking from us. 

 

It's a lovely-looking site by the way. 👏

 

If your start/end values seem off, my best guess is that you've got things loading into your site AFTER the page loads that are affecting the layout, shifting things around. For example, if you have lazy-loaded images and they load in and suddenly take in more space, pushing other things down in the layout. Either set all the widths/heights explicitly in your CSS/markup so that those don't shift -OR- make sure you call ScrollTrigger.refresh() AFTER everything is completely done shifting the layout around -OR- don't do lazy-loading. 

 

Maybe you've got other 3rd party libraries that are messing with the layout too. I noticed you're loading a lot of different libraries for various effects, and I wonder if those are throwing things off measurement-wise.

 

Here are some tips that will increase your chance of getting a solid answer:
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

We can't troubleshoot live sites like the link you provided - there are far too many factors there and we can't tweak the code and see the results. Please make sure you provide a minimal demo like a CodePen or Stackblitz that clearly illustrates the issue if you'd like some help.

 

Also, it looked a little odd to me that you set your toggleActions to "play reverse play reverse"

[Davedo]

Thanks for your advice!

I have a navbar, it changes color-mode whenever the top of a "trigger-dark-nav" element hits the top of my screen. If this element's end hits the top of my viewport, the nav turns back to its default - white mode.

I am loading in html afterwards, this might effect the points to shift.

I will try fiddeling around with some of your methods now. Will let you updated

THANKS for your help!
David

[Davedo]

16 hours ago, GSAP Helper said:

Hi there, @Davedo. Are you saying that you changed something on your site and now things aren't working properly? Or are you saying you updated the GSAP version or something like that? Sorry, I read your post a few times and I'm not quite sure what you're asking from us. 

 

It's a lovely-looking site by the way. 👏

 

If your start/end values seem off, my best guess is that you've got things loading into your site AFTER the page loads that are affecting the layout, shifting things around. For example, if you have lazy-loaded images and they load in and suddenly take in more space, pushing other things down in the layout. Either set all the widths/heights explicitly in your CSS/markup so that those don't shift -OR- make sure you call ScrollTrigger.refresh() AFTER everything is completely done shifting the layout around -OR- don't do lazy-loading. 

 

Maybe you've got other 3rd party libraries that are messing with the layout too. I noticed you're loading a lot of different libraries for various effects, and I wonder if those are throwing things off measurement-wise.

 

Here are some tips that will increase your chance of getting a solid answer:
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

We can't troubleshoot live sites like the link you provided - there are far too many factors there and we can't tweak the code and see the results. Please make sure you provide a minimal demo like a CodePen or Stackblitz that clearly illustrates the issue if you'd like some help.

 

Also, it looked a little odd to me that you set your toggleActions to "play reverse play reverse"

I can't thank you enough. The problem was way less complicated than i thought. Some of my image-wrappers where still set to width + height = auto. Adjusting them to fixed values solved my issue!

GSAP is just awesome! Thanks for everyone contributing to such a cool software
Appreciated your help,
David

[GreenSock]

1 hour ago, Davedo said:

I can't thank you enough. The problem was way less complicated than i thought. Some of my image-wrappers where still set to width + height = auto. Adjusting them to fixed values solved my issue!

🥳

 

1 hour ago, Davedo said:

GSAP is just awesome! Thanks for everyone contributing to such a cool software

💚