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: GSAP and ScrollTrigger Plugins: I've ensured that the GSAP and ScrollTrigger plugins are correctly installed and imported in my project. 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. Component Import: I've verified that the components referenced in the code are correctly imported and available within the project. 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) https://codepen.io/sheharzaddev/pen/BaMpKqB 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.