ScrollTrigger with Nuxt. Navigating between pages

[bipolab]

Hi Guys! I would like to share my problem.
I am using ScrollTrigger to animate the items in a list. This list is part of an array.
When I enter my home page for the first time, everything works correctly,

the problem appears when I go to another page, for example from home to projects and then back.

This return gives me undefined and the values of the array disappear.

I don't know if it is a problem with the nuxt hook or I am missing something,

although the entire function is in mounted () and the content comes from a fetch().

If someone can give me a solution.

I have also tried utils.toArray() but the problem remains the same.

 

<script>
// Import Gsap Plugins
import { gsap } from 'gsap/dist/gsap'
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'

// Register Gsap Plugins
if (process.client) { gsap.registerPlugin(ScrollTrigger) }

export default {
  /* name: 'componen name',
  async fetch () {
    this.callApi = await this.$axios.$get('/root')
      .then((res) => {
        return res
      })
      .catch((res) => {
        // eslint-disable-next-line
        console.error(res)
      })
  },
  data () {
    return {
      callApi: []
    }
  },*/
  mounted () {
    const { animation } = this.$refs
    animation.forEach((item) => {
      gsap.fromTo(item,
        {
          opacity: 0,
          y: 100
        },
        {
          scrollTrigger: {
            trigger: item,
            scrub: true,
            toggleActions: 'play none none none',
            start: 'top 95%',
            end: 'bottom 85%'
          },
          opacity: 1,
          y: 0
        })
    })
  }
}
</script>

 

[ZachSaucier]

Hey bipolab and welcome to the GreenSock forums. 

 

If you're loading content dynamically (like via fetch) then you will need to recreate your tweens with the new references. That means that you should also destroy your old tweens inside of some callback that switches out the content so you don't end up with memory leaks. 

 

We'd be able to help more tangibly if you recreated your issue in minimal form using something like CodeSandbox. For more info about that:

 

[elegantseagulls]

Hi @bipolab,

 

The issue to me looks like a garbage cleanup issue. You'll want to kill your scrolltrigger instance, and tweens when you navigate to a new page.