ezygaming Posted October 13, 2022 Share Posted October 13, 2022 Hey guys! I have Vue application and one of the pages is using scrollTrigger. I want to know / understand how to to proper kill all scrollTrigger listeners on page leave. Thank you very much for your help. Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted October 13, 2022 Solution Share Posted October 13, 2022 Hi, Basically use the onUnmounted hook if you are using the composition API: https://vuejs.org/api/composition-api-lifecycle.html#onupdated <script setup> import { onMounted, onUnmounted } from 'vue' import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' onMounted(() => { // CREATE YOUR SCROLL TRIGGER INSTANCES HERE }) onUnmounted(() => { // Kill All ScrollTrigger Instances ScrollTrigger.killAll() }) </script> Or the unmounted hook if you are using the options API: https://vuejs.org/api/options-lifecycle.html#unmounted <script> import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' export default { mounted() { // CREATE YOUR SCROLL TRIGGER INSTANCES HERE }, unmounted() { // Kill All ScrollTrigger Instances ScrollTrigger.killAll() }, } </script> Also since version 3.11 GSAP has Context to help you with this: https://greensock.com/docs/v3/GSAP/gsap.context() <script setup> import { onMounted, onUnmounted } from 'vue' import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' const ctx = gsap.context(() => {}) onMounted(() => { ctx.add(() => { // CREATE YOUR SCROLL TRIGGER INSTANCES HERE }) }) onUnmounted(() => { // Kill All ScrollTrigger Instances ctx.revert() }) </script> If you keep having issues please create a simple minimal demo that illustrates the issue you are having. Let us know if you have any other question. Happy Tweening! 1 1 Link to comment Share on other sites More sharing options...
ezygaming Posted October 17, 2022 Author Share Posted October 17, 2022 Thanx a lot, @Rodrigo ! 1 Link to comment Share on other sites More sharing options...
ezygaming Posted October 25, 2022 Author Share Posted October 25, 2022 Hey, @Rodrigo! Unfortunately, provided solution doesn't work for me. I have unsupported method error. Maybe I'm doing something wrong. More information: Having v2 of Vue, using destroyed webhook to kill triggers. Using 3.10.4 GSAP version and ScrollTrigger 3.11.2 version. Tried to open scrollTrigger.js to find that method, there is no such method. 😒 import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' destroyed () { ScrollTrigger.killall() } Link to comment Share on other sites More sharing options...
Rodrigo Posted October 25, 2022 Share Posted October 25, 2022 Hi, Keep all your files updated to the latest version if possible and always use the same versions in the core and plugins. Try updating to the latest version (3.11.3) since Context was added on version 3.11, that's why you're getting that error. Let us know how it works. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Cassie Posted October 25, 2022 Share Posted October 25, 2022 Hey there! As Rodrigo said - you'll need to update your versions so that GSAP and ScrollTrigger are both 3.11 or above in order to use context Quote Also since version 3.11 GSAP has Context to help you with this: In terms of killAll you just need to camelCase that. //good ScrollTrigger.killAll() //bad ScrollTrigger.killall() Happy tweening! 4 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