initium
Business-
Posts
15 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by 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%", }, });
-
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?