Jump to content
GreenSock

ezygaming

Proper way to kill all scrollTrigger listeners on page leave

Go to solution Solved by Rodrigo,

Recommended Posts

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

  • Solution

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!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

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!

  • Like 1
Link to comment
Share on other sites

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!

  • Like 4
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.
×