Sheharzad Posted November 6, 2023 Share Posted November 6, 2023 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) 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 Link to comment Share on other sites More sharing options...
Solution GSAP Helper Posted November 6, 2023 Solution Share Posted November 6, 2023 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted November 6, 2023 Share Posted November 6, 2023 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now