Changing pages causes gsap animations bug

[Prévost Clément]

My problem is quite simple, but I can't find any solution despite reading numerous articles.
To quickly explain: When I load the home page of my site or any page for the first time my GSAP animations work perfectly. However, when I change pages and then come back to the page before my annimations find themselves completely crashed...

Here is an example script in a component that I use

 

<script setup>
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

let ctx;
let timelinePresentation = false;

onMounted(()=>{

  gsap.registerPlugin(ScrollTrigger)
  ScrollTrigger.refresh()

  ctx = gsap.context( () => {
    if( window.innerWidth >= 786 ) {
      timelinePresentation = createTimeline_desktop_presentation();
    } else {
      timelinePresentation = createTimeline_mobile_presentation();
    }
  } )

})

onUnmounted( () => {
  ctx.kill();
} )

function createTimeline_desktop_presentation() {
  gsap.set('#presentation .rotateOpacity', {rotate: 15, opacity: 0, yPercent: 100, xPercent: 20});

  let scrollOnPresentation = gsap.timeline({
    scrollTrigger: {
      trigger: '#presentation',
      pin: true,
      start: "top",
      end: "+=1300",
      scrub: 1,
      // markers:true,
    }
  });

  scrollOnPresentation.to('#presentation .rotateOpacity', {
    rotate: 0,
    opacity: 1,
    yPercent: 0,
    stagger: 0.2,
    xPercent: 0,
  });
  return scrollOnPresentation;
}

function createTimeline_mobile_presentation() {
  gsap.set('#presentation .rotateOpacity',{rotate : 15,opacity : 0,yPercent:100,xPercent:20});

  const elementToScrollAnimate = document.querySelectorAll('#presentation .rotateOpacity');
  elementToScrollAnimate.forEach(el => {

    gsap.to(el,
        {
          rotate : 0,
          opacity : 1,
          yPercent:0,
          xPercent:0,
          duration : 0.25,
          scrollTrigger : {
            trigger:el,
            toggleActions: 'play none none reverse'
          }
        })

  })

  return elementToScrollAnimate;

}

// #########
// IMG HOVER
// #########
const filterImgRef = ref('filter:grayscale(100%);')
const onhover = () => {
  filterImgRef.value = ''
}
const onleave = () => {
  filterImgRef.value = 'filter:grayscale(100%);'
}

</script>

Does anyone have a solution?
I used several solutions as seen in the code above. It may be messy.

I am open to any modification or good practice that I do not apply

thank you in advance for your help

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Rodrigo]

Hi @Prévost Clément and welcome to the GreenSock forums!

 

My advice would be to use GSAP MatchMedia instead of some conditional check and GSAP Context, since GSAP MatchMedia is a wrapper for GSAP Context with responsive capacities:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

const mm = gsap.matchMedia();

onMounted(() => {
  // MOBILE SETUP
  mm.add("(max-width: 785px)", () => {});
  // DESKTOP SETUP
  mm.add("(min-width: 786px)", () => {});
});

onUnmounted(() => {
  mm.revert();
});

Finally your methods right now are returning a collection of DOM nodes and not the corresponding GSAP instance:

function createTimeline_mobile_presentation() {
  gsap.set('#presentation .rotateOpacity',{rotate : 15,opacity : 0,yPercent:100,xPercent:20});

  const elementToScrollAnimate = document.querySelectorAll('#presentation .rotateOpacity');
  elementToScrollAnimate.forEach(el => {
    // ...
  })

  return elementToScrollAnimate;
}

So neither GSAP Context nor GSAP MatchMedia will be able to revert those instances correctly since they are not inside the right scope. If you can't return the GSAP instance(s) (since you are running a loop), is better to run that loop inside the scope of the MatchMedia add() method:

const mm = gsap.matchMedia();

onMounted(() => {
  mm.add("(max-width: 785px)", () => {
    const elements = gsap.utils.toArray(".my-class");
    elements.forEach((element, i) => {
      // Create yor GSAP instances here
    });
  });
});

Hopefully this helps.

Happy Tweening!

[Prévost Clément]

Hello,

 

Thank you for your answers ! Unfortunately this didn't solve my problem...

 

Here is a stackblitz that I was able to set up with your advice

 

https://stackblitz.com/edit/nuxt-starter-mthuhk?file=pages%2Findex.vue

 

You can see the problem. Here it is the fact that sometimes not always when you go from one page to another the bug animations. For my part on stackblitz you have to change twice to have the problem. Thanks for any new advice or referrals.

 

PS: forgive me if I express myself badly. My native language is not English. THANKS.

[Rodrigo]

Hi,

 

The problem, in the stackblitz demo, is that you are not cleaning up when you change pages. This solves the problems in that particular scenario:

let ctx;

onMounted(() => {
  gsap.registerPlugin(ScrollTrigger);

  ctx = gsap.context(() => {
    gsap.set('.animation', {
      rotate: 15,
      opacity: 0,
      yPercent: 100,
      xPercent: 20,
    });

    let scrollOnPresentation = gsap.timeline({
      scrollTrigger: {
        trigger: '.my-container',
        pin: true,
        start: 'top',
        end: '+=1300',
        scrub: 1,
        markers:true,
      },
    });

    scrollOnPresentation.to('.animation', {
      rotate: 0,
      opacity: 1,
      yPercent: 0,
      stagger: 0.2,
      xPercent: 0,
    });
  });
});

onUnmounted(() => {
  ctx && ctx.revert();
});

In the case of the code you posted, which is quite different from the demo, you have to follow the same pattern, either create your GSAP instances in the scope of the GSAP Context callback or execute a function that returns the GSAP instance. Since you are running a loop, is better to just run the loop inside the GSAP Context callback.

 

Finally is always a good idea to use markers: true in ScrollTrigger when you are in development, because it helps to identify issues like this. You would actually see the markers from the index page in the second page and that tells you immediately that you are not properly cleaning up before changing routes.

 

Hopefully this helps.

Happy Tweening!

[Prévost Clément]

Thank you very much for your advice, I will try to apply all of this to my website! the context can therefore be replaced by matchMedia if I understood correctly?

 

Thanks for your help !

 

[Prévost Clément]

 

I would like to follow up on this topic.

 

Here is a link where you can see my issue more easily if anyone has any leads. I'm stuck.

https://portfolio-omega-two-26.vercel.app/

 

You need to scroll on the homepage to "Experience" and finish scrolling the animation.

Then you need to switch from the homepage to "Photographie" and come back to the homepage.

The element in "Experience" called "Alpydev" no longer appears in the animation 😕

 

Do you have any ideas? Thank you in advance for your help.

 

 

[Rodrigo]

Hi,

 

Sorry to hear about the inconvenience.

 

I'm not in front of my computer now and testing on my android phone it works as expected. I scroll down until I finish that section's animations, thenI go to the photography page, then I click on ACCUEIL to go back to the home page and I can see all three elements on the Mes expériences part 🤷‍♂️

 

Finally there's not much we can do to debug a live site, so I can't tell if you've refactored the code usin GSAP context properly or not.

 

Sorry I can't be of more assistance.

Good luck with your project!

Happy Tweening!