Please help, I've got the same error but I cannot for the life of me find where my issue is.
This is my GSAP JavaScript:
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
export default {
mounted() {
let foreground = document.querySelector('.foreground')
let header = document.querySelector('.header')
let sidebar = document.querySelector('.sidebar')
let content = document.querySelector('.content')
gsap.registerPlugin(ScrollTrigger)
gsap.set(header, { opacity: 0 })
gsap.set(sidebar, { opacity: 0 })
gsap.set(content, { opacity: 0 })
const tlEE = gsap.timeline({
scrollTrigger: {
trigger: foreground,
start: 'center',
end: 'center-=10',
scrub: true,
markers: true
}
})
tlEE
.to(header, { opacity: 1, duration: 0.5 })
.to(sidebar, { opacity: 1, duration: 0.5 })
.to(content, { opacity: 1, duration: 0.5 })
}
}
This is my HTML (Vue.3 and Tailwind CSS):
<template>
<div class="main h-[100vh]">
<div class="foreground overflow-hidden absolute">
<Header class="header" />
<div class="flex flex-row">
<Sidebar class="sidebar" />
<div class="w-[95vw] h-[85vh] grow z-20">
<AboutMe class="content" />
</div>
</div>
</div>
<Background class="background absolute" />
</div>
</template>
Any help will be massively appreciated > 👍
This is what I got when I ran "console.log('ScrollTrigger', ScrollTrigger)":
ScrollTrigger ƒ ScrollTrigger3(vars, animation) {
_coreInitted2 || ScrollTrigger3.register(gsap2) || console.warn("Please gsap.registerPlugin(ScrollTrigger)");
_context2(this);
this.init(vars, animation)…