Packo Posted August 23, 2021 Share Posted August 23, 2021 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. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted August 23, 2021 Share Posted August 23, 2021 If you're using transition, you should probably kill and create your scroll triggers using some of the hooks. https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks Link to comment Share on other sites More sharing options...
miguelst Posted February 4, 2023 Share Posted February 4, 2023 On 8/24/2021 at 12:34 AM, OSUblake said: If you're using transition, you should probably kill and create your scroll triggers using some of the hooks. https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks How do I kill and create scroll triggers again? Link to comment Share on other sites More sharing options...
Cassie Posted February 4, 2023 Share Posted February 4, 2023 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 More sharing options...
Rodrigo Posted February 4, 2023 Share Posted February 4, 2023 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now