Jump to content
Search Community

Problem with GSAP- OnEnter resize and mobile

Septrios test
Moderator Tag

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

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

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

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

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.
×
×
  • Create New...