0

Sup,

I am using gsap with ScrollTrigger to toggle dark/light mode on my site.

I wrote a function to detect when a trigger become visible:

ScrollTrigger.create({
  trigger: ".js__trigger-dark",
 start: "bottom bottom",
  end: "+=300",
onLeave: self => changeTheme(),
onEnterBack: self => disableTheme(),
});

ScrollTrigger.create({
  trigger: ".js__trigger-light",
  start: 'bottom bottom',
onLeave: self => disableTheme(),
onEnterBack: self => changeTheme(),
});

function changeTheme() {
    jQuery('html').attr('data-theme','dark');
}


function disableTheme() {
    jQuery('html').attr('data-theme','');
}

For example .js__trigger-dark toggles dark mode when the user scrolls 300px past the first section and removes the attribute when the user scrolls up again into the section with the class .js__trigger-dark. This works fine until the user reaches the bottom of the screen and the attribute is removed.

Can someone explain why it gets removed when scrolling to the bottom of the screen? For some reason onEnterBack is being called and I dont know why.

Regards, b

Valentine
  • 161
  • 1
  • 12
  • 1
    Please check if you disable js__trigger-light (remove) you still have this issue? without [mre] its hard understand positions of your triggers, maybe they have conflicts (one add anotherone remove in same moment). For check that, add `markers: true` for both triggers – Greg-- Oct 22 '21 at 12:24
  • 1
    Adding markers could change the behavior of the page because they have to be positioned on the page (i.e. might make the page bigger). I don't recommend using them to debug this case. – Zach Saucier Oct 22 '21 at 19:19
  • 1
    It's impossible for us to know the issue for sure without a minimal demo. Maybe if you used `bottom: 99999` or something instead it'd work the way you're hoping? – Zach Saucier Oct 22 '21 at 19:20

0 Answers0