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>
