Search the Community
Showing results for tags 'svg'.
-
Hello guys. Attached code pen. I am new to GSAP and you can see the animation its basically at a background on a website I want to start showing this on my scroll trigger with my scrub I am a little new to gsap cannot do it can you guys please check it. Attaching the SVG too if you want to do it. The gaps that are coming has elements between them and it will come like this in the attached screen shot. Attaching the svg too. Please make it happen for me. Group 35.svg
-
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, im working on this zoom in transition using clipPath and ScrolTrigger but im having issues with properly transitioning from one path to another. I am not sure if the issue lies in my gsap animation code, or if I prepped my svgs incorrectly. Here is a link to a demo of it https://codepen.io/akalex-x/pen/mdvOLxX As you can see it starts as a small flag crop that then grows full screen, and then I wanted to change it into a simple rectangle shape but when I try to do that it instead jumps to an awkward crop. I made my SVGs in figma and made sure they are the same size and have the same about of points. I then exported the SVGs and used https://yoksel.github.io/relative-clip-path/ to change the absolute paths to relative. Any help here will be super appreciated, thanks!
-
Hello, I want to mask svg with scrolltrigger, but there is a problem in the code, I think it does not work. I want to bring the img from top to bottom, or from right to left, with an svg mask. Can you help me?
-
Hello GSAP community, I'm new to GSAP and struggling with making an element follow an SVG path while scrolling. The element isn't properly aligned and the animation feels off during scrolling. Any quick tips on getting it to align correctly with the path and ensuring smooth scrolling animation? Your guidance is much appreciated!
-
Here's an example: https://codepen.io/helleholmsen/pen/abXvvQq Is there any known fix for this?
-
Hello, why is not working? logo
-
I have an svg whose lines i want move in the direction of mouse movement (like the grokking of bezier path).
AvaterClasher posted a topic in GSAP
I want the svg's lines to move a bit due to my mouse position and then snap back to its original position. Like this codepen but without the draggability.It should read my mouse's position. CODEPEN Link -> https://codepen.io/osublake/pen/QdbQjN. And then do the same things on this svg --> -
Hi, Firstly many thanks for taking a look at my query. I am getting inconsistent behavior on rotation of my clip path. Chrome and Safari are behaving correctly, but Firefox seems to be acting very strange. I would appriciate if someone could explain why. Many thanks ?
-
Animate a path of curved svg path to animate along center of viewport.
fawad4Real posted a topic in GSAP
Hello developer, hope you all are doing well. I want my svg to start from the center of the screen, keep animating at the center of the screen and end its animation at the center of the screen. for now, I am using an SVG and keep its height 0 and then it animates to its full height. I am using it for my timeline project but the line starts normally then moves away from the center and speeds up and leaves the screen to the bottom. -
The linked pen is a simple use case of draggable that appears to work in all aspects except one. The svg elements that are dragged will not display above any of the other elements making it impossible to determine where the cursor/drag is on the screen. The drop logic appears to work fine and there are no errors reported. Even though it is built into gsap, I tried messing with the z-index of the svg elements to no avail. I have a feeling the answer to this is simple. I just cannot figure it out.
-
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.
-
how to make this animation in Greenock?
-
Hello Everyone I hope you are doing well. I have a problem relating to the circle radius increase decrease pointer. so it works like when you drag the pointer away from the circle's center point it increases its radius and decreases when dragging towards the center point. it works fine but the pointer moves away from the circle border when you drag your mouse away from the pointer on the x-axis. I have provided the code pen so you can check it out thankyou ❤️.
-
Hi everyone! I'm trying to implement SVG drawing on scroll based on example. Currently, I have achieved some results (attached codepen), and I have a couple of questions: The timing of the circles is hardcoded (manually set by the selection method). How can I calculate them correctly? Is it possible to do this automatically? Can I somehow calculate when the line intersects the circle trajectory and launch the animation at that moment? Is it possible to slow down the filling and the scroll itself? If the SVG fit on one screen, I think I could use pin, but since it doesn't, is it only possible to achieve this using a custom scroll? I would appreciate any help or advice. Thank you in advance!
-
Hey, I was wondering what would be the best way of creating something similar, a looped animaation that shrinks and moves so fuildly. Any examples or tips?
-
Sorry for my bad english. i make an animation with ScrollTrigger, when the images become more and more bigger, the images will flash. full screen to see this example, you will find this problem. https://codesandbox.io/p/sandbox/blissful-bhabha-rz7wlb?file=%2Fpages%2Findex.tsx&selection=[{"endColumn"%3A40%2C"endLineNumber"%3A80%2C"startColumn"%3A40%2C"startLineNumber"%3A80}]
-
I am having a problem with the timings in the Timeline, The cause is either me being stupid or an error in the timings system. the red button is supposed to go back to a green button all at once, but, it goes back segmented, and yes, I setup the timeline properly. here is the code: https://codepen.io/FaxForceFive/pen/zYLQoEN
-
SVG scale bug - blurry on Safari if force3D: false and autoAlpha are used together.
anisur_rahman posted a topic in GSAP
Hello, If I use force3D: false to fix safari bug, it solves the issue and the SVG looks sharp. But If I use autoAlpha: 0 with force3D: false, the SVG looks blurry. I did not find any solutions on this forum regarding this issue. Could you tell me how I can fix the issue? Best Regards, Anis -
I'm a beginner at GSAP. I have a complex SVG which runs perfectly in HTML. I'm trying to convert it into React by using GSAP. How can I convert the HTML SVG in react? Here's the link to HTML SVG: https://codesandbox.io/s/demo-svg-html-esf3dc?file=/index.html While you put hover over the circle it is animated. Here's the Link to my React App: https://codesandbox.io/s/framer-motion-svg----3333-zcvdk1?file=/src/components/MainSVG.js I try to put all curves parents' id in the motion path. I got an error. Now as you can see I just put only 1 path id in the motion path and all works like a mess. Here's a JS function but I don't know where and how to add that in react. Maybe if I add that to my code it will work. const existElementId = (e) => { return document.getElementById(e) } existElementId("circle" + 1) for (let i = 1; null != existElementId("circle" + i); i++) { console.log(existElementId("circle" + i)) let tl = gsap.timeline({ repeat: -1 }); tl.to("#dot" + i, { duration: document.querySelectorAll("#curve" + i + " path")[0].getTotalLength() / 200, ease: "none", motionPath: { path: "#curve" + i + " path", align: "#curve" + i + " path", alignOrigin: [0.5, 0.5], } }); tl.pause() existElementId("circle" + i).onmouseover = () => { tl.play() } existElementId("circle" + i).onmouseleave = () => { tl.pause().time(0) } } I'm expecting to get any solution/idea to make it like the index.html file.
-
Is it possible to create that by code using GSAP?
-
Hello, I've run into an odd situation where an animation I've done successfully before is no longer working. It's as if the svgOrigin parameter is being ignored. The example in this post is incorrect, I will post the correct version as well. But I cant' figure out why the two are behaving differently. Incorrect version (second pen): The circles should be expanding from the point indicated by the red dot. https://codepen.io/Thisjustin3141/pen/zYaaEjg
-
If anyone could please help out with this I would appreciate it. I am trying to animate an svg with gsap. The svg is showing up in chrome, but none of the elements are moving when i add gsap. here is the issue in devtools , it seems like there's an error in my file setup? Thanks
-
"click" event on Draggable SVG element still fires after disable() and kill()
Steve Murray posted a topic in GSAP
Hi all, I'm trying to disable or kill a draggable element within an SVG. After calling disable() on the draggable, the onClick function still fires. Other effects of disabling are as expected: the element can no longer be dragged, the "grab" cursor style is removed, the onDragEnd function no longer fires. Have also tried kill(), with the same results. Here's a minimal example, tested in Chrome and Firefox. <svg version='1.1' xmlns="http://www.w3.org/2000/svg" x='0px' y='0px' viewBox='0 0 200 200'> <rect x="0" y="0" width="50" height="50" class="draggable1"></rect> </svg> <script type="module"> import { gsap } from 'gsap' import { Draggable } from "gsap/Draggable"; gsap.registerPlugin(Draggable); Draggable.create(".draggable1", { type:"x,y", bounds: "svg", onClick: function() { console.log("clicked"); }, onDragEnd: function() { console.log("drag ended"); } }); Draggable.get(".draggable1").disable(); // onClick function still fires </script> Let me know if you need further info. Cheers Steve -
My goal: have an SVG (fill: gradient) animated to change into a different gradient fill. All this should be done dynamically, using GSAP v3 (maybe using gsap.fromTo()?). I can create the SVG dynamically. I can also create other elements like the <defs> and <stop> to go inside the gradient elements. At this point, I can have the SVG display the 1st gradient dynamically. And I can animate other properties (like size, speed, or location). What I cannot do, however, is animate the actual gradient fill change using GSAP. How do you do that? There are a lot of examples from others online, but what I've found only includes: - a solid color changing to another solid color, and back - a gradient changing to a solid color, and back - a gradient changing to another gradient, and back –> but does not use SVGs and uses CSS gradients instead - a gradient changing to another gradient, and back –> but uses GreenSock v2 with the stagger function (which, apparently, doesn't exist with GSAP v3)
