Septrios

thank you very much @OSUblake But how i can kill and stop listeners, i'm a newbie 😕 If you have any codes snippet, it will be amazing thx for your help

Hello Community, i need to you I have an gsap effect on the hover link. When my mouse is mouseover element. The element follow my mouse with an effect rotate on this element. But when i clicked on the nuxt-link ( about page ) and i come back on the Homepage, the rotate effect doesn't work anymore 😕 https://codesandbox.io/s/wonderful-glitter-llzolv Could you help me please ? :) Thx

Hello @GreenSock my problem is not simple in the first view, sorry for that 😕 but thx a lot for your help If you check my minimal demo in this link : https://codesandbox.io/s/elegant-rain-2u14rh If you scrolling faster et click quick on the color section, the "about" page keep the same background color of the color section clicked. @OSUblake to advise me to put in my beforeMounted function this code : gsap.set("body", { clearProps: "backgroundColor" }); but i have the feeling that doesn't work, or it doesn't work all the time. I make a little video ( this is my screen shot video) for this render in this link : https://youtu.be/GxVvjltx_Vg i hope to help you Thx for your help

If you srolling faster on the homepage, et ou click on the any color section/item, the background color on the about page is the same color of the section color in the homepage. the clearProps doesn't work 😕

thx for your help @OSUblake but it doesn't work if you scroll a little faster 😕 you can check my new minimal demo : https://codesandbox.io/s/elegant-rain-2u14rh can you help me please thanks a lot

thx for your help @OSUblake and @GreenSock but i have an other problem. this is my new minimal demo : https://codesandbox.io/s/dazzling-sid-3ro0hz In beforeMounted function i add a body class : " bg-black". and i remove this class in the beforeDestroyed() function. I call the kill function like @OSUblake said me. So, when i switch on the "about" page, and i resize this page, all good that's work but if you scroll on the "Home" page, " little bit faster" and click on the color section ( any color section/item) and you swicth again on the "about" page, the background is the same color like the section color clicked. I thought when i kill all scroll trigger the effects are destroyed/killed too ? but the bg color persist. i dont' want to use, in the beforeDestroyed, or beforeMounted() something like that: body.removeAttribute("style") Do you have a solution, maybe with te all code because i'm newbie on GSAP Thx for your help

@OSUblake thxxxx you are a MASTER !!!! i'ts work, but just with this code : ScrollTrigger.getAll().forEach(t => t.kill()); ScrollTrigger.getAll().forEach(t => t.kill()); But i dont' know why with the first code : mounted() { this.animationService = new AnimationServicesHomePage(document.querySelector(".services")); }, beforeDestroy() { // you need to add a kill method this.animationService.kill(); } i have an error: " this.animationService.kill() is not a function. Do you know why ?

Thx @OSBlake but i dont know what to do that. If you check my minimal demo, i mounted a " new ...." where there are my scrolltrigger code, what is the code for distroyed this " new..." ? thx for your answer

Thx @OSUblake it's all good thx for your help: So, this ici my minimal demo : https://codesandbox.io/s/serverless-voice-8fqfj4 so as you can see, On the first the page load, it works. But when , I switch to the "about" page, and i resize the page, gsap effect start. So the "bg-black" class removed and the background color on the body is the last item color of my services ( purple). Ad the same thing, when the first load home page, before the scrolling, when i stay on the top, and i switch on the "about" and i come back on the home page when i resize the page, the gsap effect start. thx for your help

thanks Jack but it's doesn't work. It's the same problem. And now, with your code i have this sentence in the consol : "Invalid property toggleActions set to play none none reverse Missing plugin? gsap.registerPlugin()" I would like to make a minimal demo, but the problem 's coming when i swicth te page with Nuxt. and i dont't know how, upload all architecture's Nuxt in codepen. When i refresh my home page or the others pages, it's work. But when i switch pages with the nav ( Nuxt Router), the gsap effect persist and i don't know why, because this gsap effect is only present in the homepage Page / component . with Nuxt router there are no page refresh. So, in mobile or when i'm navigating on my website, there are this problem. I will try to make a minimal demo but i think it will be hard 😕 So if you can help me please

i think, it will complicated to make a minimal demo 😕 i think the problem is onEnter. When i switch, on the "agence page and i resize", the background color is blue. Blue is the last color of my child picture scrolling on the home page. the effect is persisting on the all website pages. I don't know why 😕

thx @_Greg _ for your answer, it's doesn't work, but now, when i switch the page ( on desktop ) and i came back on the first page, the class is removed, and the background color change. like for the first post but, before it was just on resize and mobile 😕

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", }), });