violacase Posted March 17, 2022 Share Posted March 17, 2022 <script setup> ... import { gsap } from "gsap/all" gsap.registerPlugin(DrawSVGPlugin) ... </script> Gives : Uncaught (in promise) ReferenceError: DrawSVGPlugin is not defined I'm stuck... Link to comment Share on other sites More sharing options...
Solution OSUblake Posted March 17, 2022 Solution Share Posted March 17, 2022 Hey violacase, You will need to import the plugin... import { gsap, DrawSVGPlugin } from "gsap/all" 1 Link to comment Share on other sites More sharing options...
violacase Posted March 17, 2022 Author Share Posted March 17, 2022 Hey OSUblake, long time no see This gives another problem, i.e.: vue-router.esm-bundler.js:72 [Vue Router warn]: Unexpected error when starting the router: SyntaxError: The requested module '/node_modules/.vite/gsap.js?v=276db396' does not provide an export named 'DrawSVGPlugin' Perhaps something to do with the vite bundler? Perhaps vite is looking at the wrong Gsap package? 1 Link to comment Share on other sites More sharing options...
violacase Posted March 17, 2022 Author Share Posted March 17, 2022 dependencies in package.json gives: "gsap": "npm:@gsap/shockingly@^3.9.1", Link to comment Share on other sites More sharing options...
violacase Posted March 17, 2022 Author Share Posted March 17, 2022 Sorry my fault. Problem is over. I tried to import from "gsap". Should be "gsap/all" 1 Link to comment Share on other sites More sharing options...
FBF Software Posted October 30, 2023 Share Posted October 30, 2023 Having a similar issue with ScrollSmoother importing the libraries as so (same setup as a previous project from a year ago with no issues) which is throwing "Please gsap.registerPlugin(ScrollSmoother)" and "Uncaught TypeError: Cannot read properties of undefined (reading 'getScrollFunc')" Any idea what I am missing here? "@gsap/shockingly": "^3.12.2", "gsap": "npm:@gsap/shockingly", <script setup> // Plugins // import { gsap } from 'gsap' import { ScrollSmoother } from 'gsap/ScrollSmoother' // Vue // import { onMounted, ref } from 'vue' // gsap // gsap.registerPlugin(ScrollSmoother) // Smooth Scroller // const smoothScroller = ref(null) const enableSmoothScroller = () => { smoothScroller.value = ScrollSmoother.create({ smooth: 20, // seconds it takes to "catch up" to native scroll position effects: true, // look for data-speed and data-lag attributes on elements and animate accordingly smoothTouch: 0.1, }) } const killSmoothScroller = () => { smoothScroller.value.kill() } // Lifecycle hooks // onMounted(() => { enableSmoothScroller() }) </script> <template> <div id="smooth-wrapper"> <div id="smooth-content"> <RouterView /> </div> </div> </template> Link to comment Share on other sites More sharing options...
Rodrigo Posted October 30, 2023 Share Posted October 30, 2023 Hi @FBF Software and welcome to the GSAP forums! Thanks for being a premium user and supporting GSAP! 💚 The issue here seems to be related to the fact that ScrollSmoother works on top of ScrollTrigger, so you have to install and register ScrollTrigger as well as shown in this demo: https://stackblitz.com/edit/vue-1nxir8 Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
FBF Software Posted October 30, 2023 Share Posted October 30, 2023 @Rodrigo Of course, my oversight, I can confirm I had imported and registered ScrollTrigger in the previous project where ScrollSmoother was behaving as expected. Thanks for the quick response, I really appreciate the support 1 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