initium

here it is. https://stackblitz.com/edit/nuxt-starter-lrouar?file=app.vue

Hey, i am using Nuxt3 with ScrollSmoother Plugin. So in order to wait until the page is loaded i wait for the mounted event until i show my page like so <template> <div id="smooth-wrapper" v-if="loaded"> <div id="smooth-content"> <Hero /> <Leistungen /> <PortfolioPreview /> <Deutschland style="margin-top: 250px" /> <HorizontalScroll style="margin-top: 250px" /> <Testimotionals /> <References style="margin-top: 150px" /> <Faq style="margin-top: 250px" /> <Footer /> </div> </div> </template> <script setup> import { ScrollSmoother } from "gsap/ScrollSmoother"; import { onMounted, ref } from "vue"; import Hero from "@/components/hero.vue"; import Leistungen from "@/components/leistungen.vue"; import Deutschland from "@/components/deutschland.vue"; import HorizontalScroll from "@/components/horizontalScroll/horizontalScroll.vue"; import Testimotionals from "@/components/testimotionals.vue"; import References from "@/components/references.vue"; import Faq from "@/components/faq.vue"; import PortfolioPreview from "@/components/portfolioPreview.vue"; import Footer from "@/components/footer.vue"; let smoother; const loaded = ref(false); onMounted(() => { console.log("ready"); loaded.value = true; let smoother = ScrollSmoother.create({ smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements wrapper: "#smooth-wrapper", content: "#smooth-content", scrub: true, }); }); </script> my problem is, that the scrollsmoother effect doesnt work when i use the v-if statement there. Can someone help me?

oh damn. Sounds not so easy

it think your example is a little broken. https://codepen.io/Nico-Gensheimer/pen/LYXbwjO i have made another example of mine. As you can see that the path is not always in the center of the viewport. Well i mean it shouldnt be always centered but it should not get out of viewport. Is there a way i can handle this? Thank you

aah wow thats almost what i needed! Thank you so far. But is there a way to follow the path? So that the path is moving with the sections? Thank you

sorry i am not familiar with this forum here. https://codepen.io/Nico-Gensheimer/pen/LYXbwjO so what i want to try is to draw an svg Path from panel one to panel four so that the path also grows on scroll. How would i do that with with the drawSVG Plugin? Thanks!

Hey, i am using horizontal Scroll like so: <template> <div class="outer"> <div class="container"> <svg class="how-does-it-work-path-stroke" xmlns="http://www.w3.org/2000/svg"> <path d="M 10 25 C 30 5 32 39 58 39 Q 81 39 90 23 T 50 5 Q 1 3 31 38 Q 53 61 114 27 T 179 18 T 133 41 T 197 31 L 479 25 L 596 25" fill="none" stroke="rgba(var(--v-theme-primary))" stroke-width=".05" stroke-dasharray="1" /> </svg> <div class="panel red"><HowDoesItWork /></div> <div class="panel orange"><StepOne /></div> <div class="panel purple">THREE</div> <div class="panel green">FOUR</div> </div> </div> </template> <script> gsap.registerPlugin(ScrollTrigger); let sections = gsap.utils.toArray(".panel"); let container = document.querySelector(".container"); // Set the width of the container container.style.width = `${sections.length * 100}vw`; gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: ".container", pin: true, scrub: 1, snap: 1 / (sections.length - 1), end: () => `+=${container.offsetWidth - window.innerWidth}`, markers: true, }, }); </script> i am trying to have a svg path from the first panel red until the last panel green. the svg should also move to the left like the panels do. Can anyone help me?

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?