[Vue3 new composition API register problem]

@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

[Vue3 new composition API register problem]

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>