Search the Community

Hello, Im trying to create click points on image/svg, that will animate line and point to another element point. As on image example if line is on building 1 and some one click building 2 or 3, line will go to clicked building. Best wil be if it could move just ending point from one to another position, transforming whole line That's my pen https://codepen.io/isuke01/pen/yLyyeyb but nothing exacting so far, I just create clicking area with callback, but I have no idea how to make this to work as it should. Thanks for any help

Hey folks. ? Having a bit of trouble with how to approach this. A client's asked for some x-mas baubles to "drop in all dangly" from the top of the screen, I've made a rough SVG of the structure of the bauble. The 'string' is made of circles (and other shapes, like little ribbons and bells and stuff) instead of a path. I was looking at the physics plugin, (in the attached codepen) But it kinda needs a bit of a bounce ease? And you can't mix physics and eases... Has anyone done anything like this? Any ideas of a good approach?

I'm trying to get proper control of these balloons, and I'm close, but not. quite. there yet. The green one is for reference, and demonstrates that gsap's default behavior is to use "left top" as the origin. The red one is the one whose attributes I'm tweaking, trying to accomplish this one, surprisingly-challenging goal: start horizontally centered, then animate till it's scaled 2x and centered on the crosshairs. Questions I have about the attached pen: Why doesn't the red balloon start already-centered? Why does the red balloon end up slightly below-left of the crosshairs? (I put a subtle box around the red balloon to make this easier to see.) What can I do to resolve these 2 issues before moving on to learning to animate these suckers along a curve?? ?

Hey everyone! So, this is my first time posting in the GSAP forums, as well as my first time posting in any coding forum at all, so I apologise if this is the wrong place for this kind of question. I am also veeeery new to GSAP. So basically, I'm trying the get a blob SVG to change shape every time the user clicks a button. The animation mostly works, however there seem to be a couple points that won't adhere to the animation rules I set, and change their position immediately instead of waiting to move with the rest of it. I am using arrays containing the new SVG path coordinates to pass values into the animation cycle, and perhaps my code is a very roundabout way of creating what I want, but for the most part that doesn't seem to be the issue. I have tried using a .fromTo() in case it was a problem with the initial point positions, and I have tried creating new SVGs making sure that I keep the same points to create the shapes, neither of which worked. If anyone can let me know what the issue is I would really appreciate the help! html: <button onclick="bubbleSVG()"> Blob </button> <svg width="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 900"> <defs> <style> .cls-1{fill:url(#lg1);}.cls-2{fill:url(#lg2);}.cls-3{fill:url(#lg3);}.cls-4{fill:url(#lg4);} </style> <linearGradient id="lg1" x1="1728.025" y1="658.409" x2="1364.199" y2="294.583" gradientUnits="userSpaceOnUse"> <stop offset="0" id="color1" stop-color="#55cdff"/> <stop offset="1" id="color2" stop-color="#6aff6f"/> </linearGradient> <linearGradient id="lg2" x1="1304.47" y1="310.036" x2="1197.59" y2="203.155" xlink:href="#lg1"/> <linearGradient id="lg3" x1="1652.485" y1="179.608" x2="1520.717" y2="47.839" xlink:href="#lg1"/> <linearGradient id="lg4" x1="1381.572" y1="117.848" x2="1339.908" y2="76.184" xlink:href="#lg1"/> </defs> <g id="Bubbles1"> <path id="b1" class="cls-1" d="M1259,418c52.4-92.8,234-260,422-250,165.841,8.821,168,384,13,524-148.573,134.2-347,79-415-3S1211,503,1259,418Z"/> <path id="b2" class="cls-2" d="M1165,309c21.061,54.758,84,32,124,9s78-72,61-103-49-50-88-50S1140,244,1165,309Z"/> <path id="b3" class="cls-3" d="M1583,49c100.579-15.646,155-1,145,51-5.1,26.532-59,13-126,33-70.6,21.076-91,57-145,32S1493,63,1583,49Z"/> <path id="b4" class="cls-4" d="M1353,73c-35.308,7.305-29,38-5,46s39-1,43-15S1382,67,1353,73Z"/> </g> </svg> javascript: var BlobColor1 = ["#f28500","#030087","#0079ce","#ce49ff"]; var BlobColor2 = ["#ffb300","#001eb3","#00d9f9","#f971ff"]; var Blob1 = ["M1259,418c52.4-92.8,234-260,422-250,165.841,8.821,168,384,13,524-148.573,134.2-347,79-415-3S1211,503,1259,418Z","M1309,230c52.4-92.8,246.729-119.071,363,29,117,149,199.915,385.763-7,460-131,47-138.669-35.119-192-220C1428,343,1261,315,1309,230Z","M1305,216c115.142-183.181,489-137,348,89-100.279,160.73,241.217,149.425,82,301-125,119-347,146-455,29C1169.874,515.7,1195,391,1305,216Z","M1180,389c27.432-214.617,89.781-84.552,345-218,306-160,398,335,282,547-82.843,151.4-303-9-411-126C1285.874,472.7,1163,522,1180,389Z"]; var Blob2 = ["M1165,309c21.061,54.758,84,32,124,9s78-72,61-103-49-50-88-50S1140,244,1165,309Z","M1309,581c21.061,54.758,88,64,128,41s-9-94-26-125-49-50-88-50S1284,516,1309,581Z","M1561,794c21.061,54.758,149,18,240-34,104.838-59.908,58.919-85.024,25-95-51-15-87.395.807-165,36C1575,740,1536,729,1561,794Z","M1755,164c34,23,73.208,32.127,100-12,17-28-11.162-57.01-34-84-22-26-67.2-39.09-90,0C1703,116,1731.986,148.432,1755,164Z"]; var Blob3 = ["M1583,49c100.579-15.646,155-1,145,51-5.1,26.532-59,13-126,33-70.6,21.076-91,57-145,32S1493,63,1583,49Z","M1767,163c81,69,127.446,142.778,45,149-53,4-46-21-97-82-26.694-31.928-118.783-64.3-109-123C1615,53,1697.664,103.936,1767,163Z","M1814,286c13,58,46.62,92.25,27,116-19,23-65,66-116,5-26.694-31.928-38.441-62.305-15-117C1737,227,1805.241,246.92,1814,286Z","M1495,97c-5.635,59.171-68.738,39.864-130,95-50,45-111,44-120-6-9.771-54.282,87.559-15.305,111-70C1383,53,1501,34,1495,97Z"]; var Blob4 = ["M1353,73c-35.308,7.305-29,38-5,46s39-1,43-15S1382,67,1353,73Z","M1249,346c-35.308,7.305-33.51,53.684-12,67,21,13,72,2,76-12S1278,340,1249,346Z","M1239,95c-35.308,7.305-15.51,71.684,6,85,21,13,80-7,84-39C1333.246,107.03,1268,89,1239,95Z","M1252,571c-35.308,7.3-15.51,71.684,6,85,21,13,80-7,84-39C1346.246,583.03,1281,565,1252,571Z"]; var counter = 1; function bubbleSVG() { console.log(counter); TweenMax.to("#color1", 1, { stopColor: BlobColor1[counter], ease: Expo.easeOut, }) TweenMax.to("#color2", 1, { stopColor: BlobColor2[counter], ease: Expo.easeOut, }) TweenMax.to("#b1", 1, { attr: {d: Blob1[counter]}, ease: Elastic.easeInOut, }) TweenMax.to("#b2", 1, { attr: {d: Blob2[counter]}, ease: Elastic.easeInOut, }) TweenMax.to("#b3", 1, { attr: {d: Blob3[counter]}, ease: Elastic.easeInOut, }) TweenMax.to("#b4", 1, { attr: {d: Blob4[counter]}, ease: Elastic.easeInOut, }) counter += 1; if (counter > 3) { counter = 0; } };

Hello everyone! I need help with animation performance on RETINA display I have a swiper slider and on slideTranasitionStart I'm animating a mask (covering the whole slider). The animation is very smooth in all browsers. I'm using an external monitor for work but as soon as I drag the browser window to my retina display (MacBook Pro -Retina, 13-inch, Early 2015, macOS Mojave) the animation looks very laggy (lowest fps is around 5-6!) ! I tried 2 main options to do the animation: Adding classes to transform the mask (and only using the most performant css properties transform and opacity on the animated elements). For this option I tried adding will-change property on the animated elements, I replaced translateX with translate3d, I only added transition on the transform property. Using morphSVG plugin to achieve the transforming of the mask (in the codepen demo I'm using this option as it's way less code) Unfortunately both options are still laggy on retina display. Nothing seems to improve the performance on the retina display and I'm running out of options. I'd be very grateful if someone can help out! Thank you

Dears, i have created an svg rect inside a group and i have make this svg group to have "transformOrigin:'center center' " explicitly then draw a little blue circle at this group returned position my question is when i am trying to rotate the svg group then resize it the return location is wrong and it's not at the center of this group, how i can keep my reference point at the center of this group all the time with all different transformation? https://codepen.io/Shouha85/pen/MWgxNwP?editors=1010

Hi there, What I want is for the polygons that make up the top-right triangle and the bottom-left triangle to 'expand' when hovered. This is done via a TimelineMax modifying the polygons' points. I had this working using TweenLite to move everything when hovered over and then a bunch more TweenLites to move everything back, but because the actual situation I need this for is much more complicated, that became a huge pain really quickly. So I'm trying to convert as many things as possible to Timelines so I can just reverse them. The problem I'm experiencing here is: If you roll over one triangle, mouse-out of the SVG area, and then hover over the second triangle, it works as expected. However, if after page load you roll over one triangle, then immediately roll over the other, the first triangle will stay 'expanded'. I'm guessing the problem is something to do with the original triangle's points being overwritten somehow but I haven't been able to figure it out. I tried using TweenLite.set() but nothing changed. Thanks, EK

I'm an experienced developer but new to GSAP, delighted to be here, looks amazing. Can I ask an SVG timing question before posting a codepen? I've read everything in the forum on SVG, in particular the Gotchas post, thanks for that, it was illuminating. I'm putting together my first GSAP SVG animation, ambient background thing based on a client logo, private project at the moment so I'd rather not do the codepen thing unless I have to... I'll adapt if there's no other way. Really simple design... bug from the logo, simple polyline shape, blown up to 1/3 to 2/3 screen size, low opacity, e.g. 0.1, slowly fades in from nothing, floats up the screen, fades back to nothing. many of these spawn, at different scales and speeds, each whole life takes 7 to 12 seconds, and the whole screen is full of ephemeral floaty transparent bugs, overlapping and creating cool effects. max 9 layers (I might increase that if I can solve this issue). basically working perfectly on 1st attempt, except for one issue... many if not most of the bugs disappear before their timeline is finished. still looks cool, but I'd like to isolate why this is happening. It behaves exactly the same in all browsers on all platforms I've tested (which is a credit to GSAP!). So the way I have it working is no master timeline... for each new layer a new TimelineLite, then motion and fadein-fadeout tweens added to that timeline. A function creates new layers, each on a new timeline, onComplete: new layer. (hope garbage collection clears out the dead ones, seems to be working.) I guess my question is... am I running into gotchas trying to animate 9 layers of full-screen scaled SVGs of varying opacities? It burns a bit of CPU on Safari and Chrome, but Firefox handles it easily full-screen. I'd love to get tips on how to get the TimelineLites to complete, i.e. fade to 0 before disappearing. All thoughts much appreciated.

Hey all, after adding SVG support for elCanvas I wanted to also add the ability to draw an svg outline In the code pen I attached( which i used the public examples version of drawsvg on) I am attempting this 1) Draw a svg on the document with the same paths as the one in the canvas 2) Animate the svg outlines with drawSVG 3) On update match strokeDasharray to setLineDash and lineDashOffset so the canvas shape gets updated As you see it works! However every time I would need to draw an svg into the canvas I would first need to put one on the document, I wanted to ask is there a way around this? Is there a way to get the lineDash/DashArray data without having to draw an svg visually? When I put some animations with this effect into our game the devs might get upset I'm drawing all these elements just for reference I guess this is mainly a question to you awesome devs that made the lib in the first place @GreenSock but also to anyone else who might know. I had another consideration where I could make modifications to the plugin itself, but I really didn't wanna touch that, trying to do this without needing to modify Gsap code Thanks in advance!

Hi, I'm curious about whether something I'm doing in svg will be possible in PIXI. I'm building complex svg diagrams that animate, but also with aspects of them that I want to be able to animate zoom on, (almost) infinitely (think Mandelbrot set like zoom but data-visualization related). Currently I'm using svg for that infinite scaling capability, but I know that for some of my data sets, svg isn't going to cut it eventually. It'll just become too much weight on the DOM / CPU at some point as there will simply be too many things on the screen to render, forget animate. I could look into things like tiling, but that has a pretty huge performance / usability penalty for my use-case. Also, the complexity and detail of what I need to visualize isn't so great as that of a map either. Also, I'd still need to animate aspects of the visualization, which isn't usually necessary with tiled maps. I'd like to switch to leverage a gpu based solution like PIXI down the line. The only problem is that PIXI doesn't really preserve the scalability aspect of svgs (not at all a PIXI expert, have only built some simple circle animations to test with). I'm pretty confident that minus the zoom functionality, PIXI+GSAP will be a good solution for every other aspect of the rendering / animation, but do you know if there is a way to leverage all the GPU powered goodness of PIXI but still preserve the sharpness of images and text as a user "infinitely" zooms in? (10x, 100x, 1000x scale of original)?

Hi! I am trying to transform or build this css animation into a GSAP timeline because with CSS is consuming too much CPU. The #bar-- is a g element of an svg that contains 80 bars @for $i from 80 through 1 { #wave-g__top--#{80 - $i} { animation-name: barOpacity; animation-iteration-count: infinite; animation-duration: 5s; animation-delay: $i * 0.065 + 0.25s; } } @keyframes barOpacity { from { opacity: 1; } to { opacity: 0.2; } } This is animation I am getting with CSS https://i.gyazo.com/fec064c25c2456ce2c3e34e932a5607e.mp4 and I thought this could be the similar in GSAP but is just not working, I am very new with this actually. const bars = document.querySelectorAll('#wave-g__top g') let tl = new TimelineMax({ repeat: -1 }) bars.forEach((b, index) => { const delay = index * 0.065 + 0.25 tl.to(b, 0.1, { opacity: 0.2 }, `-=${delay}`) })

I'm a complete newbie to GreenSock. I'm encouraged by what I've seen here (really, really amazing stuff). I'm trying to render in code and images/vectors a version of something I've already done in video. I've deployed this little site and was asked to animate some images behind their logo (using the logo as a mask). The site is located at https://momentovillasdelmar.com. The image of the logo is done as a video -- with the commiserate file size and limitations of video. I'm seeking a solution that uses an SVG to mask the 4 or 5 images that are sliding around and cross-fading behind the mask. Is this something that can be done (I know it has to be)? I would very much appreciate any insight you all might be able to provide. -- Doug

I have an SVG path styled to look like a dotted line. I want the path to look like it's drawing in. I created a mask and tried to animate the mask path but it refuses to draw. In the Codepen example, I found that the mask animation worked if I modified the SVG and gave the path a few bends. Does the straight line confuse DrawSVG because it doesn't know what the start/end points are? How can I get the straight line's mask to animate? edit: Fix appears to be adding maskUnits="userSpaceOnUse" to the mask definition in the SVG. Stack Overflow link

Hi, first of all i want to thank you for GSAP being awesome. Creating my site, i noticed strange behavior. I have complex animation, wchich goes forward/backward depending on wether element is clicked even or odd times. Everythings works pretty well exept for one part. I have svg stars empty inside with clipped rect to animate 'loading' the stars. While rest of animation works back and forth without any issues, here works well for the first time, then each consecutive time looks like there is one more animation interfering with the rest. It,s hard to explain it precisely, due to my limited english, however it's clear in the example i attached . Just click a few time and observe the effect. For demostration purposed, I removed all well-functioning parts of animation.

Hello, I have implemented an animation with text shadows for my text using CSS, and would like to achieve the same effect on my SVG file. Basically what I need are two shadows with different colors moving away from eachother. I tried using SVG animations but then I found out about GSAP, which seems like a very good thing to know how to work with. But since I'm new to all of this I'm giving up after trying about 10 different things. You can pretty much see all the things I've tried commented out. Sorry if it's too much text but I wanted to make sure there'd be enough context. Thanks in advance.

Hi, I have created a minimalistic code pen to replicate the scenario CodePen. What I want to achieve is: Child (the cyan rows) should also be dragged along with the parent (greyed area) Child (the cyan rows) should be independently draggable within that grey area This works fine in Microsoft Edge and FireFox desktop browsers but doesn't work in Google Chrome

Hi. I created a simple SVG witch is nothing more than a black rectangle that covers the screen and a transparent circle in the middle. Its purpose is to give the appearance of zooming in/out on the image behind it, thereby blocking out the image except for what is seen through the transparent circle. The above code works fine when I am scaling up, then down, in one motion. However, when I am only wanting to scale down, to draw the circle to the center of the screen, the code behaves in a hap-hazard way. The black rectangle scales improperly. I have tried different approaches, like using opacity zero when scaling-up, then switching to opacity 1 to show the effect, but the result is always the same. If you uncomment the line of js code, you'll see what I am getting. Please have a look at my pen (my first, owing to the demo you provided :0) Note: the pen that is embedded is not running correctly. But does so when I paste the url into the browser. https://codepen.io/don199/pen/wbdgQv

Hey all, I saw a lot of chatter on here that SVG G isn't necessarily supported but figured I would check -- I'm getting a really odd matrix transform for rotation on a SVG G elements. Seems like it's getting a translateX + translateY movement as well and swinging the animation strangely. Works perfectly for just SVG and I could rewrite to break out the g elements to separate SVGs (processor GULP!) but figured I'd check before I consider. The browsers we're supporting take in transform: rotate(90deg) correctly on SVG G and I could probably rewrite for CSS tweens as well but they're always a pain. Anyway, let me know eitherway! Thanks --- I didn't fork the broken codepen and now it's working as intended with the updates below.

Hi, there's a strange bug I've been coming across and not sure how to fix, it only happens very occasionally, but does always happen eventually if you keep refreshing. Seems like it's something to do with a wrong 'xPercent' calculation? I'm animating every svg elements y position from bottom to top, fine Then I am animating some elements to 'wiggle' their x and y positions. Sometimes the x axis seems to be wrong and they move much too far I originally thought the problem was because I was trying to animate the wiggle from the start, at the same time as moving everythings 'y' position. But I delayed any 'y' position animations until the first 'move up' animation was finished Funnily enough I can't seem to get the codepen to reproduce this bug... Making me think maybe it's network related, something trying to calculate before the svg is fully loaded...? Anyone seen something similar before, any idea what's going on? Is there a less troublesome way to achieve the same effect? I tried using 'x' instead of 'xPercent' but this made a jump in the animation and also xPercent is preferable as the image resizes a quite lot Thanks ?

In the attached pen, the moving elements do not stay centered on the blue line. The triangle and balloon don't stay attached at their center origins at the "top" half of the blue circular line. They do align as intended on the bottom part of the line. Removing the xPercent/yPercent via the TweenLite.set does make them stay positioned closer to the blue line, but we want them to be centered the whole way around. Or, if you change the xPercent/yPercent to positive 50 instead of negative, it reverses the problem: the shapes attach correctly on the top half of the line, but not the bottom half. Any idea what is happening?

Let me start by saying that I know this is a Chrome/Chromium issue. The CodePen works as expected in Firefox. Also, I know Blake has warned about using foreignObjects but I'm stuck with using them because, in my app, I have to use foreignObjects to render image layers to canvas creating a stack of PNG sequences inside a master SVG. I'm also forced to be able to support Chrome/Chromium. Here's the deal. I've run into a stacking context issue which I thought I had resolved before by doing something subtle to the SVG container using TweenMax to force the browser to do a redraw. Here, though, the issue is a little different. I have to allow my users to shift the order of each foreignObject which I accomplish using a javascript insertBefore. But, as you can see in the CodePen, if you shift the animated element to the back of the stack and then re-run the animation the browser is rendering it on TOP of the stack for as long as the animation is running. Then, once the animation is completed, the browser renders the element to the back of the stack where it belongs. Forcing a redraw like I've done in the past is not working. Any help would be greatly appreciated.

So I've been getting to know the morphsvg and drawsvg plugins the last day or so, and my goal has ultimately been a curved arrow that animates as you see in the attached codepen. The issue I'm having now is that the line for this arrow should be dashed and I'm not sure what the problem is. There's a stroke-dasharray setting on the svg to begin with, but the drawsvg animation seems to override that. So I tried adding a strokeDasharray property to the tween itself but that seems to have no impact (first time using that and honestly not sure if I'm using it properly; couldn't find any documentation on it and only a couple codepen examples of it being used). I have a few, more drastic solutions in mind that seem very hacky to me so I'm hoping there's a clear approach here that I'm just unaware of. Also, if you disable the js and run the pen that will show what I am trying to get the line to look like.

I'm trying my hand at animating SVGs with gsap and having a very rocky start. My ultimate goal is to be able to just animate an arrow to follow a specific path and to autorotate along the path (so that the tip of the arrow is always centered on the line). I figured an easy start to understanding this would be to take the gsap demo code and just make minor changes to it. In this case, I simply replaced the balloon path with an arrow tip and made sure the ids were matching in the js. The problem is that the arrow seems to be all over the place in regard to the line it's supposed to be following. I've tried some minor changes in the code (adding transforOrigin properties, changing the x and y percentages on the set method) but I feel like I'm sort of throwing darts here and not seeing any real progress. If anyone could clue me in as to what I'm missing here, that would be fantastic (hopefully this exposes a fundamental misunderstanding I have of SVGs and animating them).