Hello,
I'm a new Gsap's fan in this place . I'm a french Developper, so sorry for my english.
I have a problem with GSAP.
I have a scrollTrigger.create, where I add and remove a class ('bg-black) depending on the trigger.
Also, I change the colors of the background in another scrolltrigger, when scrolling the page. On the first load it works!, but when, I switch to the mobile or switch the page and come back to the first page in desktop(when i m resize the window) , the bg-black class is automatically deleted and the background has the last color of the effect. By debugging, the problem would come from the OnEnter function, but I can't find an answer, thank you for your help
I used NUXT, locomotive scroll and GSAP
ScrollTrigger.create({
trigger: ".services__content",
scroller:'.js-locomotive',
start: "top 30%",
end:'bottom 30%',
markers:true,
toggleActions : "play none none reverse" ,
onEnter: () =>
body.classList.remove("bg-black")
,
onLeaveBack: () =>
body.classList.add("bg-black")
})
ScrollTrigger.create({
trigger: colorSection,
scroller:'.js-locomotive',
start: "top 50%",
end:'bottom 50%',
markers:false,
toggleActions : "play none none reverse" ,
onEnter: () =>
gsap.to("body", {
backgroundColor: colorSection.dataset.bgcolor,
}),
onLeaveBack: () =>
gsap.to("body", {
backgroundColor: prevBg,
overwrite: "auto",
}),
});