Error about page jump registerPlugin

[nanako]

Hello everyone,
I'm new to GSAP and I encountered some problems.

problem1：

When I enter page1 and jump to another page, the data of page1 will remain on the screen.

 

Problem2：
When I opened the picture button in page2 again, the details and the Lorem ipsum appeared on the screen already.

How to run GSAP animation again？

Here is my stackblitz link 
GSAP Page Transitions in Vue3 (forked) - StackBlitz

My English is not good because I am not a native English speaker and I use translation software

I hope you can understand what I mean and help me please

Thank you so much

[GSAP Helper]

It's very difficult 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 illustrates 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. 

[nanako]

I am sorry for causing you trouble.
 

Here is my stackblitz link 
GSAP Page Transitions in Vue3 (forked) - StackBlitz
 

Thank you very much for your help！

[nanako]

57 minutes ago, GSAP Helper said:

It's very difficult 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 illustrates 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: 

 

 

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. 

I am sorry for causing you trouble.
 

Here is my stackblitz link （Please use the "open in New tab" button）

GSAP Page Transitions in Vue3 (forked) - StackBlitz

Thank you very much for your help！

[GreenSock]

Sorry, your link isn't working for me but maybe this will help?

https://stackblitz.com/edit/vitejs-vite-w8wtpj?file=src%2FApp.vue

[nanako]

9 hours ago, GreenSock said:

Sorry, your link isn't working for me but maybe this will help?

https://stackblitz.com/edit/vitejs-vite-w8wtpj?file=src%2FApp.vue

I'm very sorry and I repair it.
Please try this stackblitz link again.
https://stackblitz.com/edit/vitejs-vite-7b2tf6?file=src%2Fviews%2FIndexView.vue
 

I hope it works.

[GreenSock]

It looks to me like you're not doing proper cleanup. Please study the link I provided earlier - it shows how to use gsap.context() to easily revert() everything when your component unmounts. Beyond that, it sounds like more of a Vue question, right? We really try to keep these forums focused on GSAP-specific questions (like about the API). Perhaps someone with more Vue experience (like @Rodrigo or @Cassie) have ideas. 🤷‍♂️

[Rodrigo]

Hi,

 

I agree with Jack in the lack of cleanup in your app. GSAP Context is the right tool for this as shown in this demo:
https://stackblitz.com/edit/vue-dm3aa9?file=src%2FApp.vue

 

Basically the idea is to revert everything when you unmount each particular view/route. In the case of page1 you have an element that is pinned, since you're not reverting that particular ScrollTrigger instance, that pin element remains in the DOM creating the scroll space that shouldn't be there.

 

As for the Flip animation, the problem is that  you're just toggling display from none to block and back, but the elements inside the card all have opacity: 1 and visibility: visible, so as soon as the display goes back to block the elements are actually visible:

You want to set those to autoAlpha: 0 when you toggle the roleOpen reactive property in your code here:

if (x == 'x') {
  roleOpen.value = false;

  const state = [roleImg.value, roleName.value, roleCard.value];
  const state2 = Flip.getState(state);

  reImg.value.appendChild(roleImg.value);
  reNameJob.value.appendChild(roleName.value);

  await nextTick();

  Flip.from(state2, {
    absolute: true,
    x: 0,
    duration: 0.8,
    stagger: 0.05,
    ease: 'power1.inOut',
    onComplete: () => {},
  });
  gsap.to(modal.value, { autoAlpha: 1, duration: 0.35 });
}

I would probably do it after the nextTick in order to ensure that the DOM has been updated since you're using the v-show directive.

 

Hopefully this helps.

Happy Tweening!

[nanako]

Thank you a lot for @GreenSock and   @Rodrigo , appreciate！

I set up the GSAP Context but the page1 screen will still remain in index and page2.

I think GSAP Context is actually working but the page1 screen is still there......😥
 

export default {

  setup() {

    let ctx;

    let area = ref();

 

    onMounted(() => {

      ctx = gsap.context(() => {

        const section3 = document.querySelector('.section3');

        const srollTL = gsap.timeline({

          scrollTrigger: {

            trigger: section3,

            pin: true,

            markers: true,

            scrub: true,

          },

        });

 

        srollTL.to('.gate-left-1', { yPercent: '-100' });

        srollTL.to('.gate-right-1', { yPercent: '100' }, '<');

        srollTL.to('.gate-left-2', { yPercent: '-100' });

        srollTL.to('.gate-right-2', { yPercent: '100' }, '<');

      }, area.value);

    });

 

    onUnmounted(() => {

      ctx.revert();

      ScrollTrigger.killAll();

    });

  },

};

[Rodrigo]

Hi,

 

I see the issue in your demo, but I'm unable to reproduce it on my local machine and Stackblitz:

https://stackblitz.com/edit/vitejs-vite-zqevby?file=src%2Fviews%2FAboutView.vue&terminal=dev

 

Honestly I've never seen this behaviour before and not being able to reproduce it leads me to believe that there is something else in your project causing this.

 

I'd recommend you to start a new Vue3 project using Vue Router and GSAP to begin with, create something simple like I did in the demo I linked and then start adding stuff until it breaks, then you'll know what's causing this. Honestly I can't think of anything that would make part or an entire view persist in different routes.

 

Sorry I can't be of more assistance.

Happy Tweening!

[nanako]

Hello,@Rodrigo
Thank you for the help and suggestions.
Yea, it was indeed a really weird behavior to see, luckily. I think I may have just found the reason behind my codes, and now it’s fixed and up and running.
I really appreciate your assistance.