Skrypt

@Cassie thanks for your reply! Unfortunately, the links you dropped don't contain the solution. I've currently implemented a setTimeout() of 250ms and the issue seems to be gone. Also dropped the question in the Nuxt discord, maybe someone over there can point me in the right direction.

Hi everyone, I'm working on my first Nuxt 3 website with GSAP and ScrollTrigger, however I can't get things to work as I want. First of all, there's a minimal demo over here: https://codesandbox.io/s/skrypt-nuxt-dev-cvw0o (codesandbox instead of CodePen, so everything is fully loaded). The problem: When you load the homepage, you can see the markers of the ScrollTriggers. These ScrollTriggers are initialized inside each component (./components/sections). The components are loaded dynamically on the website. When going to another page (e.g. /over-ons) and navigating back to the home page, you can see the Start marker has move to the top of the viewport. This causes the timeline in the second component to start playing while the ScrollTrigger shouldn't have fired yet. I know I have to kill the ScrollTriggers before the new components are being loaded, but none of the lifecycle hooks seem to work. I've tried this inside the pages/[...slug].vue and pages/index.vue files like this: import { ScrollTrigger } from "gsap/ScrollTrigger" export default { async beforeMount() { ScrollTrigger.getAll().forEach(ST => ST.kill()) ScrollTrigger.refresh() }, } I guess the problem has to do with Nuxt 3 or with my way of dynamically loading the components (they're first fetched from the CMS, then loaded inside Nuxt). The weird thing is, if I add a setTimeout() to the mounted() hooks to delay the GSAP code, the ScrollTriggers do work as expected. Anyone who can help me work around this issue?