Jump to content
Search Community

Vue3 new composition API register problem

violacase test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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?

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...