Why is my GSAP fullpage scroll with ScrollTrigger not functioning as expected?

[Sheharzad]

I'm encountering an issue with my project's GSAP (GreenSock Animation Platform) implementation, specifically related to GSAP's full-page scroll and ScrollTrigger functionalities. Despite having set up the code as per the documentation, it's not working as expected. The issue seems to be affecting the smooth scrolling and trigger animations.

 

I've verified the following aspects:

1. GSAP and ScrollTrigger Plugins: I've ensured that the GSAP and ScrollTrigger plugins are correctly installed and imported in my project.
2. HTML and CSS Structure: I've reviewed the HTML and CSS structure to ensure that it aligns with the required setup for GSAP and ScrollTrigger.
3. Component Import: I've verified that the components referenced in the code are correctly imported and available within the project.
4. ScrollTrigger Triggers: I've set up ScrollTrigger triggers for smooth scrolling and animations for each section, following the documentation.

Despite these checks, the issue persists, and I'm encountering errors or unexpected behavior, including difficulties with full-page scrolling and animations not triggering.

 

<template>
  <div class="content">
    <section class="panel">
      <HomeBanner />
    </section>
    <section class="panel">
      <HomeProductsTabsComponent />
    </section>
  </div>
</template>

<script>
import HomeProductsTabsComponent from '~/components/HomeProductsTabsComponent.vue';
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger';

export default {
  components: {
    HomeProductsTabsComponent,
  },
  layout: 'default',
  data() {

  },
  mounted() {
    // Register GSAP plugins
    gsap.registerPlugin(ScrollTrigger);

    // Define sections
    const sections = gsap.utils.toArray(".panel");

    // Function to scroll to a specific section
    function goToSection(i) {
      gsap.to(window, .8, { scrollTo: { y: scroll }, ease: Circ.easeOut }, "-=.5");
    }

    // Set ScrollTrigger defaults
    ScrollTrigger.defaults({
      // markers: true
    });

    // Create ScrollTriggers for each section
    sections.forEach((eachPanel, i) => {
      ScrollTrigger.create({
        trigger: eachPanel,
        onEnter: () => goToSection(i),
      });

      ScrollTrigger.create({
        trigger: eachPanel,
        start: "bottom bottom",
        onEnterBack: () => goToSection(i),
      });
    });
  },
};
</script>

Here the console error:
Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': The provided value is not of type 'ScrollToOptions'.
    at PropTween2._setterFunc2 [as set] (gsap-core.js:3692:25)
    at PropTween2._renderComplexString2 [as r] (gsap-core.js:3729:8)
    at Tween2.render3 [as render] (gsap-core.js:3456:12)
    at Timeline2.render3 [as render] (gsap-core.js:2257:19)
    at _lazySafeRender2 (gsap-core.js:192:13)
    at Array.updateRoot (gsap-core.js:2695:7)
    at _tick2 (gsap-core.js:1315:22)

 

See the Pen BaMpKqB by sheharzaddev (@sheharzaddev) on CodePen

 

I'm seeking advice and solutions from the developer community to help identify and resolve the problem, as the current setup doesn't seem to be achieving the intended scroll and animation effects. If you have any insights or recommendations for troubleshooting and resolving these GSAP and ScrollTrigger issues, your assistance would be greatly appreciated.

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

[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. 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: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

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

[Rodrigo]

Hi,

 

A few notes. Your demo is not working, as mentioned above we have a collection on Stackblitz of Vue3 starter templates, you can fork one of those and make it look like your setup. Be sure to import and register the ScrollTo plugin as well, since I don't see that in your demo nor the code snippet you posted.

 

Also I noticed this in your code:

function goToSection(i) {
  gsap.to(window, .8, { scrollTo: { y: scroll }, ease: Circ.easeOut }, "-=.5");
}

You're telling the ScrollTo plugin to take the window's scroll value to scroll, but that scroll value is not defined anywhere, so that most likely will throw an error.

 

Hopefully this helps.

Happy Tweening!