[Gsap NUXT/VUE problem with animation Rotate when i'm clicking on Nuxt-link]

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

[Gsap NUXT/VUE problem with animation Rotate when i'm clicking on Nuxt-link]

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

See the Pen by s (@s) on CodePen

[Problem with GSAP- OnEnter resize and mobile]

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

[Problem with GSAP- OnEnter resize and mobile]

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 😕

[Problem with GSAP- OnEnter resize and mobile]

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

 

[Problem with GSAP- OnEnter resize and mobile]

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 

[Problem with GSAP- OnEnter resize and mobile]

@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 ?

[Problem with GSAP- OnEnter resize and mobile]

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

[Problem with GSAP- OnEnter resize and mobile]

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

[Problem with GSAP- OnEnter resize and mobile]

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

 

[Problem with GSAP- OnEnter resize and mobile]

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 😕

[Problem with GSAP- OnEnter resize and mobile]

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 😕

[Problem with GSAP- OnEnter 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",
        }),
    });