Search the Community
Showing results for tags 'vue3'.
Found 11 results
-
I'm trying to get ScrollTrigger to work in my Vue 3 SPA. The page layout is: <body> <div id="#app"> <div class=".scrollable"> <div class=".content"></div> </div> </div> </body> The catch is that #app and .scrollable both have height: 100vh, and .scrollable has overflow: auto. Unfortunately, it looks like ScrollTrigger is only listening for scroll events on body. Here's a minimal example that demonstrates the problem: https://codesandbox.io/p/devbox/vue-scrolltrigger-test-k8qmt8?file=%2Fsrc%2Fcomponents%2FTallComponent.vue%3A17%2C7 [EDIT: above demo is now working, thanks to the answer below.] Is this a known limitation, or am I missing something? I'm new to GSAP, so probably — hopefully — the latter! Thanks.
-
Hello all of you, I'm trying to create an icon animation where the two lines that make it up must always rotate in a clockwise direction, regardless of the animation state (forward or backward). Despite the need to create the simplest possible demonstration, I've still used the VueJS3 Framework, because I wonder if the unexpected result I'm getting isn't somewhat related to the way the functions are launched. I'm really having trouble understanding why I'm getting the result I'm getting. If anyone can shed some light on this, I'd be very grateful! - Why the animation seems incomplete at the first click - Why on second click there is just one element moving up - Why on all next click the animation seems to be played at reverse Expected result: On first click, the "chevron" icon rotate clockwise to look up 🔺 On second click, the "chevron" icon still rotate clockwise to retreive is initial look down 🔻 and so one. So the icon has two state (up and down) but toggle it by rotating always clockwise.
-
Hi team! How can I make this slides automatically play in every 10 seconds or so... When it reaches the last slide, animation starts from start thanks)
-
Hi, I'm trying to make a magnetic hover composable in Vue3, GSAP and I wanted to replicate from this Link 2 Ways to Make a Magnetic Buttons using React, GSAP, Framer Motion (olivierlarose.com) . I'm needing help how to convert it with typscript too. Here is what I have so far : import { ref, watchEffect } from 'vue' import gsap from 'gsap' export function MagneticHover({ children:any }) { const magnetic = ref(null) watchEffect(() => { const xTo = gsap.quickTo(magnetic.value.current, 'x', { duration: 1, ease: 'elastic.out(1, 0.3)' }) const yTo = gsap.quickTo(magnetic.value.current, 'y', { duration: 1, ease: 'elastic.out(1, 0.3)' }) magnetic.value.current.addEventListener('mousemove', (e) => { const { clientX, clientY } = e const { height, width, left, top } = magnetic.value.current.getBoundingClientRect() const x = clientX - (left + width / 2) const y = clientY - (top + height / 2) xTo(x) yTo(y) }) magnetic.value.current.addEventListener('mouseleave', (e) => { xTo(0) yTo(0) }) }) return () => { return children({ ref: magnetic }) } }
-
Hello, I am building a website with vue 3 and i want a section to have this marquee effect (products scrolls infinitely + responsive). But i am having trouble to build it. can you help me? Thank you so much! vue verison https://codepen.io/berkegvn/pen/bGOENjy i want something like this one, stops when hover and drag to move both sides. https://codepen.io/animaticss/pen/ZEqdMmr HTML SCSS version
-
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?
-
Hi everyone, I'm relatively new to GSAP, and I'm running into a problem that I'm not sure is related to Vue or GSAP. I have created a simplified example on StackBlitz to demonstrate the problem: example. Master timeline -> stores/AnimationStore.ts Usage & Child timeline -> app.vue Here is the problem I'm facing: I'm trying to share a GSAP timeline called master via Pinia in my Nuxt 3 project. Components in the project can create their own child timelines and add them to the master timeline. In the example, the child timeline is correctly added to the master timeline, but when I play the master timeline, it just starts (console.log('Master started')), but doesn't update or finish. Also, the child timeline doesn't run. I would appreciate any guidance or suggestions on how to solve this issue. Thanks in advance for your help!
-
Hi everyone, I like the aspects of GSAP timelines. In my Nuxt 3 application, I've been utilizing a master timeline shared via Pinia. Each component utilizes a context that is defined within the "onMountend" Lifecycle Hook and reverts during the "onUnmounted" phase. If a component is mounted, I add its animations to the master timeline. If the component gets unmounted, I remove the component's animation from the master timeline. Does the revert() function automatically remove the component's animations from the master timeline, or do I have to remove the animation myself?
-
I'm have a panoramic SVG with three main focal points. I style it to be wider than the user's monitor, and the idea is as they advance from one position to the next in the UX, the SVG will pan to center each of those three points to give the impression of moving along the X-axis. I'm also zooming in and out when the "frame" changes. I can calculate the center of each focal point and provide GSAP with an x coordinate describing how it should transition left to give the impression of forward motion. I use `scale` for zooming. However, I must to provide a positive `position` property to the `.to()` to ensure the two events don't happen at the same time, or the transform-origin causes problems: It's not linear forward movement; the animation tugs back and forth. I think it would be better looking if both props animated at the same time. I have tried adding an `onUpdate` callback attempting to adjust the transform origin as the animation progresses, but it doesn't work at all. something like: const setTOrigin = gsap.quickSetter(this.selector, 'transformOrigin') onUpdate: () => { // const currentOrigin = gsap.getProperty(this.selector, 'transform-origin') setTOrigin(`${animation.progress() * centers[1]}px`) // centers is an array of the focal point centers coords } Not sure this is even a good idea. Just something I tried. What I have, technically works. But it is pretty janky. And again, doesn't provide the option to use negative positions to make the animation quicker and smoother. I've made a minimal reproduction here hoping someone can offer some guidance: https://codepen.io/thomas-hibbard/pen/RwqbymO Thanks for any insight.
-
Hello everyone, As someone new to GSAP and animation, I am trying to implement this specific animation into my Nuxt.js project. However, I am encountering difficulties and would appreciate any help or guidance you can provide. Here are the dependencies I am currently working with: "nuxt": "^2.15.8" "vue": "^2.7.10" And here are the relevant devDependencies: "nuxt-gsap-module": "^1.7.3" I want to click on the hamburger the menu will open and the hamburger will change to the close button very smoothly same as clicking on the close button. I would like to know how I can successfully implement the menu animation in my Nuxt.js project using these dependencies. Any advice or assistance you can offer would be greatly appreciated. Thank you! reference link: https://www.wilsoncreative.se/
-
Intro: Theres probably not a simple anwser to this but I wanted to see if someone more gsap experienced than me knew of some cool trick that could help me before I go on to do some overly complicated way of solving my issue. Whatver the case, thanks to anyone who is willing to give my issue a shot one way or another. Context: So, I want to create a component builder that lets users drag and drop blocks in place. As part of this I am using GSAP Draggable to drag and drop an element. The riddle im stuck on at the moment is I want the element to snap into place when its dragged over an area that can receive it. The simple solution is to just use the hitTest() function to detect if eligeble element is hit and then get either the points off that element to use in the livesnap, or get the transforms to match that element or something like that. Problem is that in a more complex example, for my use case, I dont actually want to manually create a uniqe function for every possible snappable area since there might be a lot. The ultimate solution would be if I could somehow dynamically fetch whatever snappable element we have hit. But as far as I can tell, from the docs, the hitTest() doesnt actually return the hit element, it just returns a boolean which kinda forces me to do something uniqley for each individual element that can get hit. Question: Is there a straight forward way to dynamically get whatever element I hit with the hitTest()? Codepen: Ive provided a codepen that acts like a massive simplification of what I am trying to do just to narrow it down to exactly what I am asking and making easy to experiement with solutions. Hope that makes it simpler to understand.
