Jump to content
Search Community

GSAP ScrollTrigger with Vue and Vue router

andelko21 test
Moderator Tag

Go to solution Solved by andelko21,

Recommended Posts

Hello, I got some issues with gsap plugine ScrollTrigger,
Here is some basic example what is problem in my codesandbox link.
The main problem here is when I change my route to "About" and come back on "Home" Gsap ScrollTrigger do something unexpected.

Codeandbox link https://codesandbox.io/s/sad-cray-cwjjk?file=/src/main.js
Here is picture of .start and .end of negative valuegsap-Scroll.jpg

Link to comment
Share on other sites

7 hours ago, ZachSaucier said:

Hey andelko21 and welcome to the GreenSock forums. If you kill off the ScrollTrigger instead of disabling it it seems to work for me.

Hello, Zach tnx for answers and solution. Yea I have been tried it to but i was concerned about performace. Does it effect the perfomance If every time I mount my component I have to reinit scrollltrigger ?

Link to comment
Share on other sites

  • Solution

I solved my issues.
I have to use :
 

  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>

inside my root component and then when first time component is call onmounted hook I used function to init scrollTrigger, and with <keep-alive> i got two new hooks activated  and deactivated  where I could toggle between .enable() and .disable() ScrollTrigger instance. Without any problems.
 I still doesn't have conclusion why this happened in old version, here is picture of call stack and closure when .enable() is called, you can see that ref on my element "logo" is null but it should have value in due of hook mounted where I did call .enabled().

Ps. I think I get this

This happened because in my old version after the componet being destroyed all reactive that was deleted to. So it was the reason of null reference at .enable() and why Gsap couldn't be able do trigger after changing routes, simply it had old ref for not existing element.

 

gsapPr.jpg

  • Like 1
Link to comment
Share on other sites

On 1/10/2021 at 3:18 AM, andelko21 said:

Does it effect the perfomance If every time I mount my component I have to reinit scrollltrigger ?

In most cases I don't think you'd notice a performance hit. But keeping your component alive is a valid option - it just requires more active memory for the user which is a significant trade off and should only be used in some circumstances.

  • Thanks 1
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...