ScrollSmoother not working correctly

[initium]

Hey,

i am using Nuxt3 with ScrollSmoother Plugin. So in order to wait until the page is loaded i wait for the mounted event until i show my page like so 

 

<template>
  <div id="smooth-wrapper" v-if="loaded">
    <div id="smooth-content">
      <Hero />
      <Leistungen />
      <PortfolioPreview />
      <Deutschland style="margin-top: 250px" />
      <HorizontalScroll style="margin-top: 250px" />
      <Testimotionals />
      <References style="margin-top: 150px" />
      <Faq style="margin-top: 250px" />
      <Footer />
    </div>
  </div>
</template>

<script setup>
import { ScrollSmoother } from "gsap/ScrollSmoother";

import { onMounted, ref } from "vue";

import Hero from "@/components/hero.vue";
import Leistungen from "@/components/leistungen.vue";
import Deutschland from "@/components/deutschland.vue";
import HorizontalScroll from "@/components/horizontalScroll/horizontalScroll.vue";
import Testimotionals from "@/components/testimotionals.vue";
import References from "@/components/references.vue";
import Faq from "@/components/faq.vue";
import PortfolioPreview from "@/components/portfolioPreview.vue";
import Footer from "@/components/footer.vue";

let smoother;

const loaded = ref(false);

onMounted(() => {
  console.log("ready");
  loaded.value = true;
  let smoother = ScrollSmoother.create({
    smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
    effects: true, // looks for data-speed and data-lag attributes on elements
    wrapper: "#smooth-wrapper",
    content: "#smooth-content",
    scrub: true,
  });
});
</script>

my problem is, that the scrollsmoother effect doesnt work when i use the v-if statement there.

Can someone help me?

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[initium]

here it is.

https://stackblitz.com/edit/nuxt-starter-lrouar?file=app.vue

[Rodrigo]

Hi,

 

The problem is that you're asking the wrong hook for the job. This is not a job for the mounted hook is a job for the watch hook:

https://vuejs.org/guide/essentials/watchers.html

 

You have to wait until loaded is updated, once is updated and the DOM has been updated you can create your ScrollSmoother, ScrollTrigger and any other GSAP instances:

https://vuejs.org/api/general.html#nexttick

 

Here is a fork of your example:

https://stackblitz.com/edit/nuxt-starter-dskjju?file=app.vue

 

Hopefully this helps.

Happy Tweening!