Jump to content
Search Community

Scrolltrigger stops working after route changes in router Vue.js when using transition

Packo test
Moderator Tag

Recommended Posts

I have this problem that after switching between routes, my content in some of the components becomes invisible and stay on 0 opacity.  If I try to mess with the window size, the content will eventually appear but when I change the route, it stays 'invinsible' again. 

 

Here's my parent App.vue component where I put the router-view.

<template>
  <div class="main">
    <Header />
    <Overlay :class="{ open: showNav }" />
    <div class="burger" @click.stop="showNav = !showNav">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
    <main>
      <router-view v-slot="{ Component }" class="view">
        <transition name="slide-fade">
            <component :is="Component" />
        </transition>
      </router-view>
    </main>
    <div class="lgl" id="lgl">
      <div class="legals" v-show="timeout">
        <p>COPYRIGHT © 2021 Economy plus s.r.o | Web solution by DEVISION</p>
        <span>
          <router-link :to="{ name: 'CookiePage' }"> Osobnú údaje</router-link>
          |
          <a
            href="javascript:void(0);"
            aria-label="View cookie settings"
            data-cc="c-settings"
            >Nastavenia súkromia</a
          >
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "./components/Header";

import Overlay from "../src/components/Overlay.vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

However, if I don't put the router-view into transition, everything works just ok. Also I need to have the component in keep-alive tag because for some reason the scrolltrigger doesn't animate after that as well. I found that solution here on forums. 

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

you can use .kill() to kill ScrollTriggers

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/kill()

or killAll()

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.killAll()

In terms of creating again, that's up to you, you'll need to run the code that makes the ScrollTriggers. That's quite dependant on your setup, but popping the code in a function is one way to go.

e.g.
 

function create() {
  gsap.to(elem, {
    rotation: 360,
    scrollTrigger: {...}
  })
}

// run the code to create the scrollTriggers        
create()

 

Link to comment
Share on other sites

Hi,

 

Adding to Cassie's great advice here is a simple example of using route transitions in Vue3 with GSAP and creating ScrollTrigger instances on a couple of routes:

https://stackblitz.com/edit/vitejs-vite-w8wtpj

 

It uses a composable in order to keep track of the animation state in order to inform the view when is safe to create the GSAP/ScrollTrigger instances.

https://vuejs.org/guide/reusability/composables.html#composables

 

Also it uses GSAP Context for simple and easy cleanup and simplified scoping:

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

 

Let us know if you have more questions.

Happy Tweening!

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...