Search the Community

Hello Everyone. I am new to GSAP in general and this is my first time using the GSAP MorphSVGPlugin and was hoping for some guidance. I have a simple eye made with two separate svg's. The one I am trying to animate is the eye-white svg. I want to create a simple blinking animation using the GSAP MorphSVGPlugin. As you can see from my plugin the initial opening animation and the random blinking animation don't seem to be working. I also originally did this with Vanilla JS and couldn't get the animation quite right, that's why I am switching to GSAP's plugin. I have a feeling I am just new to this and don't quite understand the fundamentals but if someone could help me out I would appreciate it because after several hours of this I am out of ideas. I am using HTML, SCSS, and JS. I also added the raw SVG files in my html commented out as I am not sure if that is needed or not. Thanks

Hi, I have an SVG and I would like to morph between the letters and the icon in the SVG. What I've noticed is that I can morph the letter paths to other letter paths and I can morph the icon paths to other icon paths. However, when I try to morph the icon paths to letter paths, the icon paths appear to scale down and / or move and disappear. What is happening and how do I fix this please ? Thanks Justin

Hi to all, Formula 1 2021 season will soon start so I've thought it would be nice to share my animation. It was for a contest and I still believe it was the best but the client is always right (only when he's not ? - remember Steve Jobs?). Undercutting in F1 is going to pit earlier, do some fast laps (with fresh tyres - filling a fuel not an action here) and get in front of the car previously leading. Maybe the text caption for driving fast lap(s) would be good to add (you can see in the code the red car is driving faster after a pit stop). I would love to see the code updated to GSAP 3 if anyone has time to do it - I haven't succeeded in the zeitnot. And for real F1 fans here's the schedule for 2021 (I don't remember but maybe there are all tracks available as vector shapes somewhere on the web): https://www.formula1.com/en/racing/2021.html ?

Has anyone encountered the issue, today I was work on a new project and I was using new updated GSAP and MorphSVGPlugin for this one. I had to do some motion along a path. So first this I wan creating variables like below: var motionPath_1 = MorphSVGPlugin.pathDataToBezier("#motionPath-1", {align:"#connecting-dot"}); But this is throwing an error as below: Uncaught TypeError: MorphSVGPlugin.pathDataToBezier is not a function This is the same thing I've been using and on the new update this has no change as I can think of. When using old GSAP and MorphSVGPlugin it is work fine. Has anyone encountered this? Does anyone know what is the issue?

Hi Guys, I'm trying to make this simple planet orbits animation but I finally hit the wall achieving this astronomical mess. I know I need to somehow make the planet a child of the orbit animation but I'm not sure how. Thank you in advance Gp

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).

Hi GSAP community! :) I was playing around with a logo for fun when I ran into this strange misalignment issue, it's quite apparent when you see the demo on codepen. I think it what comes down to is when the moons are animated separately everything works fine, but then if I add the rotating animation of the entire object (svg group holding all the pieces) the 'align' property of the `MorphSVGPlugin.pathDataToBezier` settings does not align correctly. When the global rotating animation is done you can see the objects 'snap' into place correctly. Is there any way to make this work? Am I missing something, maybe I should set that 'align' property to something else? Let me know what you think :) Thanks, Gleb

Hello, I'm facing some issues with MorphSVGPlugin. I want to use it on the index.html file of my Angular 6 project. The problem is that if I import the file in the script section of my angular.json it breaks the other scripts. I have tried to import it directly on the file with the <script> tag but Angular is not able to find it. Is there any way to use it on index.html? Thanks!!!

First, I want to say thanks for all the hard work put into the greensock tools. It's fantastic. It might be a stretch, but I was wondering if the MorphSVGPlugin might have some method for calculating the difference between 2 svg paths. Essentially, I want to calculate how closely 2 shapes match. Say for example I have a 200x200 square, 300x200 rectangle, and 300x300 star. Comparing the square and rectangle would return a higher accuracy value than comparing the square and star, since the square and rectangle paths match more closely, so to speak. Currently, im just comparing the area of the shapes, but it can only get me so far and I feel a path comparison would be more accurate. Perhaps there are methods in the precompiler that I can utilize? Any way to measure the total offset of the path after it morphs? Any pointers are much appreciated!

Hi, fellow GreenSock (forum) members. I'm stuck with animating an object over path, more like generally how to center say rectangle or any path to move smoothly on a path with autorotating. The Codepen pen is a part from what I would like to do but can't center the green "car" e.g. so that its center (midpoint X and Y or centroid if you wish) would move on the path. This year I have created complex animation of a cube moving along the "infinite" path with calculating shadows per rotation angle - with callback function - yet cannot do this simple animation well. Gray path is a rectangle, red one is nearly completed rounded rectangle with Bezier curves. The latter would be perfect but I cannot script the green rectangle to be centered on path at all times. So in general how to draw, position and/or offset an object so that it will move along the path by its center (centroid)? Having a group with invisible rectangle boundaries and then animating a group along the path? And yes, I have watched the excellent Note: I'm using svg.js for some easy creation of SVG elements. Intention is to script all to have rule base path creation and then animating objects over paths. Sure, the path rounded corners will be redone with arc commands :-).

I just started trying to work with the MorphSVG plugin and feeling like I must be missing something. Not working out quite as simply as expected. I have a basic S curve type shape that I want to animate into a straight edged rectangle. I'd like it to just smoothly iron out the curves until it goes straight but when I try this out it does a weird flip animation from one shape to the other. I'm exporting my SVG paths from Adobe Illustrator since it gives me a lot of control over how the path is drawn but I don't work with SVG much so this might be part of the problem. Any help to push me in the right direction to achieve this is greatly appreciated!

I'm using the pathDataToBezier to create a path for my tween to follow. All is good... ...except I would like to be able to scale the path for responsive screen sizes. I have not figured out a way to do this. I've tried to scale the path smaller before calling "var path = MorphSVGPlugin.pathDataToBezier", but there seems to be no effect. Any ideas? Am I missing something?

Carl brought up this canvas morphing demo I made... http://codepen.io/osublake/pen/RWeOWX But it's kind of old, so I told him I would make an updated version because doing canvas morphing is much easier now. You no longer have to use an actual SVG path as a proxy to get the transformed path strings. There's an undocumented method that the precompile option uses (pathFilter), so you a can tap into that to get the transformed path strings. // Path strings var path1 = "M300,25l86.6,150H213.4Z" var path2 = "M500,23.92L524.72,74,580,82l-40,39,9.44,55.05-49.44-26-49.44,26L460,121,420,82l55.28-8Z"; // Data for the start and end paths var pathData = [path1, path2]; // Run it through the MorphSVGPlugin MorphSVGPlugin.pathFilter(pathData); Using the pathFilter method might seem awkward at first because it doesn't return anything. It mutates the array you pass into it with the transformed path strings... http://codepen.io/osublake/pen/1754cdf8805e7061094036125958200d?editors=0011 There are also some other things you can pass in the pathFilter method, like a shapeIndex and map type... MorphSVGPlugin.pathFilter(pathData, 6, "complexity"); The next step is to decide on how you want to tween the pathData. In the past I would convert the pathData strings into a bunch of arrays of numbers, and tween the arrays using the EndArrayPlugin, kind of like in this demo I made before the MorphSVGPlugin came out... http://codepen.io/osublake/pen/RPKdQz?editors=0010 But that can get messy, and there's a much better solution with modern browsers, the Path2D object. It will allow you to use SVG paths directly inside of canvas. var path = new Path2D("M10 10 h 80 v 80 h -80 Z"); context.fill(path); And since GSAP can tween complex strings, we now have a pretty straightforward way to do morphing inside canvas! http://codepen.io/osublake/pen/EZNMEZ/?editors=0010 However, there is one issue. There won't be any IE support for this, and the SVG constructor feature is currently broken in Edge. Hopefully that will get resolved soon. https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8438884/ So there you go. High-performance morphing using GSAP and canvas. Morphing 50 different shapes while using a blend mode. http://codepen.io/osublake/pen/pRNYRM/?editors=0010 .

I am currently working on a project where an animation along the line is implemented, i.e. a chosen SVG element (in this particular case a <g> ) is moved along a <path>. Previously, I have implemented this using Snap.SVG and it worked fine, however, having to also do some "morphing" on the elements, I decided to give MorphSVGPlugin a go to save resources. However, so far it has not been a smooth ride... Stepping through the code, I observe the following: 1. The object is rendered in a starting position (the correct starting position). 2. The line path is rendered (I used fill="blue" just to demonstrate the position of the line) - the starting point is supposed to be the top "corner", however, it is an invisible "looped" line. 2. The animation kicks in, and the object is instantly positioned somewhere else! This is the actual problem for me right now. 3. The object is animated along a correct curve! This makes me think that MorphSVGPlugin.pathDataToBezier method is working as intended and provides x-y array of movement points. However, TweenMax.to() method seems to disturb the intended starting point for the animation, I really can't put a finger on it right now. There is very little control I have over the artwork, which has been designed in AI and exported to SVG format. Hoping to find the resolution to this problem as soon as possible.

I'm trying to make an element appear as if it's drawing a path as you scroll down the page. I have it mostly working fine, but the the object doing the following slowly drafts away from the intended path the further into the animation it gets. Unsure why this is. There's an additional problem where it completely misses the path data for the last "hump" too, you'll see what I mean towards the very end of the line (maybe this is related?) To draw the path I'm revealing the line by animating a duplicate path with a white stroke above it. The pathDataToBezier function is fed the original path data though. Open to alternative ways of doing it if I can't find a solution. You may have to maximise the preview window to see it draw properly. Thank you

Hi I need some help from the forums' SVG savants, I'm using DrawSVG and MorphSVG to create a couple of animations, but I'm hitting a wall regarding the Morph SVG part of it. I draw a simple path and then animate the fill. The idea is to create a frame with some dynamic text inside, like this: Here's the pickle. Since the text is dynamic the frames on the has to be changed according to the height of the text container inside. For that I'll use MorphSVG, but I need to translate the points of these paths by a specific amount of pixels, which changes the entire scheme of the paths, ie, changes not only the points' positions but also the control points of the bezier curves as well. I using pathDataToBezier() I can get the paths and offset the points by a specific amount, but how can I get this bezier with the new array of points and turn it back to an SVG path that I can use in the MorphSVG Plugin?, like in the codepen sample. PS: Is really odd to be on the other side of a thread

Trying to learn animating along a path with Greensock. I got the animation working, but I can't seem to get rid of the white background. In the codepen, you can see there is supposed to be a green background (bg) in the html file. But a white background, that seems to be within the <SVG> tag is blocking it. Does anyone know why this is happening? Is MorphSVGPlugIn causing this? Thanks.

I'm trying to morph an SVG with a plugin and I'm getting pixel loss issues when previewing out of IE and Edge. Here's a screen capture of whats happening - https://www.dropbox.com/sc/xpqj3ggo2lavxbu/AAAgLnFAG-u4r-WfGf3urznla Anyone encounter this issue before? Thanks!

Hi, When using greensockglobals object, I can't get the morphSVGplugin to work (it throws errors). The drawSVGplugin DOES work with greensockglobals, but if I use the morphSVGplugin the same way I use drawSVGplugin, it's not working. If I code without using greensockglobals, both plugins works perfectly fine. But obviously I want to use the globals object. Could this be a bug in the morphSVGplugin? (Not respecting the greensockglobals object) Or am I doing something wrong here? THIS IS MY CODE WITHOUT GREENSOCKGLOBALS (working fine) [... greensock lib here...] var tl = new TimelineMax(); tl.to('#objectFrom', 0.2, { morphSVG: { shape: '#objectTo' }, ease: Linear.easeNone }); THIS IS THE SAME CODE WITH GREENSOCKGLOBALS (throwing errors): var gs = window.GreenSockGlobals = {}; [... greensock lib here...] var tl = new gs.TimelineMax(); tl.to('#objectFrom', 0.2, { morphSVG: { shape: '#objectTo' }, ease: gs.Linear.easeNone }); Thanks in advance!