Jump to content
GreenSock

Septrios

Problem with GSAP- OnEnter resize and mobile

Recommended Posts

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

 

Capture d’écran 2022-02-15 à 09.58.44.png

Capture d’écran 2022-02-15 à 09.59.09.png

Capture d’écran 2022-02-15 à 10.04.01.png

Capture d’écran 2022-02-15 à 10.04.13.png

Link to comment
Share on other sites

Hi!.

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

 

Link to comment
Share on other sites

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 😕

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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 😕

Link to comment
Share on other sites

@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
	}
});

 

Link to comment
Share on other sites

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 :)

 

Link to comment
Share on other sites

Thx @OSUblake it's all good :) thx for your help:

 

So, this ici my minimal demohttps://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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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());

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

thx for your help @OSUblake and @GreenSock but i have an other problem.

 

this is my new minimal demohttps://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 

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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 😕

Link to comment
Share on other sites

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. 🤷‍♂️

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×