Jump to content
Search Community

Jordan.

Members
  • Posts

    2
  • Joined

  • Last visited

Jordan.'s Achievements

  1. I have tried re creating my issue within GSAP CodePen but I cant seem to get the error, I will give any info needed on my specific problem, it seems that it just doesnt want to work for me, I have the latest version of gsap also.
  2. 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)…
×
×
  • Create New...