initium

this error comes with my live version. As i said it works in my dev environment and it also works in the sandbox. But it does not work when i generate the website to a static website with nuxt.

https://codesandbox.io/s/optimistic-tess-9p5jzo I am using multiple timelines in order to simulate multiple components. I also did the console.log(ScrollTrigger) and it is not null. Console Logs: 1. 9fa9222.js:2 Invalid property scrollTrigger set to {trigger: '.kunden-wrapper', start: 'top 80%', once: true} Missing plugin? gsap.registerPlugin() 2.GSAP target not found. https://greensock.com 3. ƒ e(n,o){r||e.register(t)||console.warn("Please gsap.registerPlugin(ScrollTrigger)"),this.init(n,o)} 4. 9fa9222.js:2 Invalid property scrollTrigger set to {trigger: '.leistungen-wrapper', start: 'top 95%', markers: true} Missing plugin? gsap.registerPlugin()

index.vue: let t1 = gsap.timeline({ scrollTrigger: { trigger: ".leistungen-wrapper", start: "top 95%", markers: true, }, }); t1.from(".leistungen-software-wrapper", { opacity: 0, x: -200, duration: 0.7, ease: "back.inOut", }).from( ".leistungen-website-wrapper", { opacity: 0, x: 200, duration: 0.7, ease: "back.inOut", }, "-=.7" ); and im creating another timeline in different file which is used in index.vue: let t1 = gsap.timeline({ scrollTrigger: { trigger: ".kunden-wrapper", start: "top 80%", once: true, }, }); t1.from(".kunden-h1", { y: 100, opacity: 0, duration: 0.3, }) .from(".kunden-p", { y: 100, opacity: 0, duration: 0.3, }) .from(".partner-image", { y: 100, opacity: 0, stagger: { each: 0.1, from: "center", ease: "ease-in-out", }, }); importing like this: import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger);

i dont know if a demo would help. Because on my local machine in my dev environment it works all fine. But when i bring it to live and generating the website with nuxt, it breaks. The animation starts on pageload and not when it is in the viewport. I can link my website if this can help. https://neu.initiumit.de/

markers doesnt appear on the live website but on dev mode. I also get a warning in the console: Invalid property scrollTrigger set to {trigger: '.kunden-wrapper', start: 'top 80%', once: true} Missing plugin? gsap.registerPlugin()

Hello, i am using Nuxt, gsap and ScrollTrigger for my website. In Development mode its everything fine but as soon as i generate the website to a static page, Scrolltrigger is not working anymore. The animations are executed as soon as the site gets loaded. nuxt.config.js build: { transpile: [ "gsap" ] }, index.js import { gsap } from "gsap/dist/gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; created() { gsap.registerPlugin(ScrollTrigger); }, let t1 = gsap.timeline({ scrollTrigger: { trigger: ".leistungen-wrapper", start: "top 95%", }, });

Got it thanks!

Hey, I want to do this animation on the right hand side, where the picture comes in from the bottom and overlaps the old one. How could i do this?