Hello @Cassie thanks for the quick reply!! I found the issue, I had installed gsap from npm before, and it was cached. So when I installed later via the .tgz file it was still referencing the one from npm. Now, that's solved but I'm getting another issue ?
I was able to pin it down to the the Scrolltrigger import. So I commented it to validate this issue, but I get another errror:
Details about my setup:
I'm using Nuxt: ^2.15.8
node: v14.17.6
I've wasted a lot of time figuring this out, would appreciate some help ?
Here's the source for my page:
<template>
<main>
<section class="hero py-0 relative grainy has-animation">
<div class="hero__container">
<div class="hero__container__content relative z-10">
<h1 class="animated">Hero text goes here</h1>
<a href="#about" class="btn text-center"> button label </a>
</div>
<img
src="/images/hero-woman.png"
alt="Woman floating wearing a vr headset"
/>
</div>
</section>
</main>
</template>
<script>
import { gsap } from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'
import { SplitText } from 'gsap/SplitText'
export default {
name: 'IndexPage',
async asyncData({ $prismic, params, error, app }) {
const homepage = (await $prismic.api.getSingle('home')).data
return {
home: homepage,
}
},
mounted() {
this.animateElements()
},
methods: {
animateElements() {
const animationWrappers = document.querySelectorAll('.has-animation')
if (animationWrappers.length) {
// Registering plugins
gsap.registerPlugin(ScrollTrigger)
gsap.registerPlugin(SplitText)
const timelines = []
animationWrappers.forEach((element) => {
if (element.id) {
const tl = gsap.timeline({
scrollTrigger: {
toggleActions: 'restart none none reverse',
trigger: `#${element.id}`,
start: 'top 85%',
markers: true,
},
})
const mySplitText = new SplitText(`#${element.id} .animated`, {
type: 'words,chars,lines',
})
const chars = mySplitText.words // an array of all the divs that wrap each character
tl.to(`#${element.id} .animated`, 0, {
className: '+=animation-container',
opacity: 1,
overflow: 'hidden',
}).staggerFrom(
chars,
1,
{
opacity: 1,
y: 100,
rotationY: 10,
rotationX: 10,
transformOrigin: '0% 50%',
ease: 'power2.easeOut',
},
0.01
)
timelines[element.id] = tl
}
})
}
},
},
}
</script>
Let me know if this is enough details, if not i can also provide the repo link. Thanks again!!!
