Problem with GSAP- OnEnter resize and mobile

[Septrios 0 Likes (Newbie)]

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

 

[_Greg _ 128 Likes (Specialist)]

Hi!.

You need to call recalculate ScrollTrigger after resizing with ScrollTrigger.refresh()

 

[Septrios 0 Likes (Newbie)]

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 😕

[_Greg _ 128 Likes (Specialist)]

Please create a minimal demo.

This is hard to see what happened without demo.

Did you see triggers are in the right place if you use markers: true? 

Are you sure that you need to use onLeaveBack not onLeave? 

[Septrios 0 Likes (Newbie)]

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 😕

[GreenSock 18,877 Likes (Superhero)]

@Septrios we can't effectively troubleshoot live web sites - if you can't provide a minimal demo in CodePen or something like that, you'll probably need to secure paid consulting services. My advice: try to reproduce the issue in the most basic way possible (a few simple <div> elements in a CodePen) and then post that here. 

 

I think part of the problem is likely that you're just doing tweens inside a callback which don't get reverted when ScrollTrigger.refresh() is called (like on resize). I'd probably just use a regular tween that has a ScrollTrigger, like this: 

 

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

// NEW
gsap.to("body", {
	backgroundColor: colorSection.dataset.bgcolor,
	scrollTrigger: {
		trigger: colorSection,
		scroller:'.js-locomotive',
		start: "top 50%",
		end:'bottom 50%',
	        toggleActions: "play none none reverse",
		immediateRender: false,
		preventOverlaps: true,
		fastScrollEnd: true
	}
});

 

[Septrios 0 Likes (Newbie)]

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

 

[OSUblake 18,534 Likes (Superhero)]

We don't require CodePen. If you need to use nuxt, here's a CodeSandbox template to get your started.

 

https://codesandbox.io/s/gsap-nuxt-starter-r5lkg?file=/pages/index.vue

[Septrios 0 Likes (Newbie)]

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

[OSUblake 18,534 Likes (Superhero)]

Hi Septrios,

 

It doesn't look like you are killing your ScrollTriggers when navigating to a new page. You should be able to do that in something like beforeDestroy. Try fixing that first, because your ScrollTriggers will still be running even after going to a new page.

[Septrios 0 Likes (Newbie)]

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

[OSUblake 18,534 Likes (Superhero)]

13 minutes ago, Septrios said:

i mounted a " new ...."  where

 

I see that, but you need to kill the old ones when navigating to a new page.

 

14 minutes ago, Septrios said:

what is the code for distroyed this " new..." ?

 

You'd have to write add your own method to the AnimationServices class to kill the instance.

 

mounted() {
  this.animationService = new AnimationServicesHomePage(document.querySelector(".services"));
},
beforeDestroy() {
  
  // you need to add a kill method
  this.animationService.kill();
}

 

If you don't keep track of the ScrollTriggers you create, you can just kill them all.

 

ScrollTrigger.getAll().forEach(t => t.kill());

 

[Septrios 0 Likes (Newbie)]

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

[OSUblake 18,534 Likes (Superhero)]

12 minutes ago, Septrios said:

i have an error: " this.animationService.kill() is not a function. Do you know why ?

 

There is no kill method. That's why I was saying that you would need to write that yourself. Maybe something like this.

 

export default class AnimationServicesHomePage {
  constructor(animationEl) {
    this.triggers = [];
    this.DOM = {
      animationEl: animationEl
    };
    this.DOM.scrollColorElems = [
      ...this.DOM.animationEl.querySelectorAll("[data-bgcolor]")
    ];
    if (this.DOM.scrollColorElems) {
      this.DOM.scrollColorElems.forEach((colorSection, i) => {
        const prevBg =
          i === 0 ? "" : this.DOM.scrollColorElems[i - 1].dataset.bgcolor;
        this.animationBgImgScroll(colorSection, prevBg);
      });
    }

    /*    ScrollTrigger.addEventListener("resize", () => locomotive.update());

        ScrollTrigger.refresh(); */
  }

  kill() {
    this.triggers.forEach((t) => t.kill());
  }

  /* Animation Scroll Bg Color Change Services Apparitions Home */

  animationBgImgScroll(colorSection, prevBg) {
    /* ScrollTrigger.config ({ limitCallbacks: true }) */
    const body = document.querySelector("body");

    let st1 = ScrollTrigger.create({
      trigger: ".services",
      start: "top 12.5%",
      end: "bottom 12.5%",
      markers: true,
      toggleActions: "play none none none",
      onEnter: () => body.classList.remove("bg-black"),
      onLeaveBack: () => body.classList.add("bg-black")
    });

    let st2 = ScrollTrigger.create({
      trigger: colorSection,
      start: "top 50%",
      end: "bottom 50%",
      markers: false,
      invalidateOnRefresh: true,
      immediateRender: false,
      preventOverlaps: true,
      fastScrollEnd: true,
      onEnter: () =>
        gsap.to("body", {
          backgroundColor: colorSection.dataset.bgcolor
        }),
      onLeaveBack: () =>
        gsap.to("body", {
          backgroundColor: prevBg,
          overwrite: "auto"
        })
    });

    this.triggers.push(st1, st2);
  }
}

 

 

[GreenSock 18,877 Likes (Superhero)]

11 hours ago, Septrios said:

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 just had a typo - put the toggleActions in the ScrollTrigger object. It's fixed in the original post. 

[Septrios 0 Likes (Newbie)]

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 18,534 Likes (Superhero)]

3 hours ago, Septrios said:

I thought when i kill all scroll trigger the effects are destroyed/killed too ?

 

That won't happen in your case because you are changing the color in a callback. In your beforeDestroy, you can remove the style like so.

gsap.set("body", { clearProps: "backgroundColor" });

 

 

[Septrios 0 Likes (Newbie)]

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

 

[OSUblake 18,534 Likes (Superhero)]

I'm not sure I understand. What doesn't work if I scroll fast? I don't see anything strange.

 

[Septrios 0 Likes (Newbie)]

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 😕

[GreenSock 18,877 Likes (Superhero)]

I cannot replicate the issue you describe, @Septrios. I'm lost. I don't see anything malfunctioning. Maybe I'm missing something obvious. The background on the about page is ALWAYS white for me. 🤷‍♂️

[Septrios 0 Likes (Newbie)]

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

[GreenSock 18,877 Likes (Superhero)]

It sounds like you've got an animation of the <body> backgroundColor in-progress when you click, right? So of course it'll continue to set the backgroundColor until it's finished unless you kill() that tween. Or you can gsap.killTweensOf("body") for example.