Search the Community

I am trying to morph SVG on scroll. I have two shapes with id's #shape-1 and #shape-2. What I want is after say 20px of scroll shape-1 morphs into shape-2 and when we again scroll back up the shape-2 reverts back to shape-1. I am able to morph the first time but can't seem to get the proper logic to morph every time the user scrolls above or below a certain scroll value (20px for instance).

Hello everyone! I'm new to GSAP, and maybe I'm just tired at the moment and not seeing things clearly, but I'm having a lot of difficulty with a simple slideshow using the GSAP MorphSVG plugin. In my pen I have a series of <svg> elements defined which, when the .svgbox the svgs are held in is swiped left or right, morphing is supposed to occur. Basically, on a "touch swipe" (or a "drag" with the mouse), I determine the "firstSVG" and the "secondSVG" that the firstSVG is to be morphed into. This seemed to work perfectly when swiping "left", but when swiping "right", I ran into some issues with the morphs not occurring. This line taken from my pen (under the portion of the code that handles a "right" swipe) seemsto be part of the problem: firstSVG=$(slideArray[currSlideIndex-1][0]); //index within array should be currSlideIndex rather than currSlideIndex-1. Magically, it works. I originally had this line to be: firstSVG=$(slideArray[currSlideIndex][0]); such that the currSlideIndex, firstSVG and secondSVG values were adjusted properly (but the morphs don't act as expected). When I set the code to be as it is currently: firstSVG=$(slideArray[currSlideIndex-1][0]); The firstSVG and secondSVG values come up at times as being the same value (but the morphs work fine in either swipe direction). I'm at a loss and would greatly appreciate any help anyone could provide. PS: Clicking on "run pen" will show the pen more as it is expected to be seen. The very bottom of the purple box showing the firstSVG and secondSVG values is cut off in the embedded pen for large browser sizes. Please resize your browser a bit to see the entire content or open it up on Codepen to see what I'm asking about. Thank you very much, in advance. -Joe

I have a little animation with the morphSVG plugin and would use the precompiled calculations for performance optimizing. So i use precompile: "log", but in the console is nothing to see. Same on shapeIndex: "log". I was wondering why - it seems correct to me.

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 .

Hello everyone ! I have some very fun and complex thing to do, and any help will be much appreciated ! I'm trying to move SVG group along the path, scale it down, and then move elements of that group along different path. But when I scale down the parent element I also scale the motion path of the child element, and I'm wondering what I'm doing wrong here? Or, maybe my approach is just totally bad. That is what I have https://codepen.io/Dikus/pen/EmaqbV And that is what I would like to achieve - of course the group should scale down, but the path should be the same https://codepen.io/Dikus/pen/EmaqLP?editors=1010 Final SVG - maybe this will help you to imagine what I would love to achieve - the last movement of the purple particle, should move along the purple stroke http://patryksmakosz.com/dev/spectrometer/ So, my question is - is it possible to scale down the main element, and do not scale the path with it? Wish you all the best ! PS pathDataToBezier just rocks! Probably I miss something big here

I've been playing with the morphsvg bow and arrow demo: http://codepen.io/chrisgannon/pen/epZyEK?editors=0010 I was trying to get a wiggle strain when the bow was fully pulled, and using CustomWiggle and rotation with easeInOut produced some cool results, but I was trying to get the Bow and string to relax part of the way back to the relaxed/straight state. Is there anyway to animate a wiggle ease in and out partway back through an animation? Thanks.

Hi all, like the topic already mentions do I have a problem with stuttering animations inside my TimelineMax animation and it would be really great, if somebody of you could help me. I'm currently developing a system for our company in which images and videos of our work can be uploaded/selected with the help of a CMS. These media should be animated afterwards, so that it looks like a dynamic generated showreel. So I used PHP to dynamically generate the JavaScript code and basically it works, but as you can probably see in the Codepen or in the demo, especially in Chrome the animations are stuttering a lot (depending on your computer/device). I have to say that I'm new to Greensock and also not the most experienced developer, so I would appreciate every advice of you. Regarding my code I guess there's a lot of potential for optimization. Especially the way of adding the subtimelines to the maintimeline and calling the functions of the subtimeline is probably wrong. For example: var mainTimeline = new TimelineMax({repeat:-1}); mainTimeline.add(websiteTimeline(website)); function websiteTimeline(website) { MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline"); // Create sub timeline var timeline = new TimelineMax(); // Add tweens to sub timeline timeline.call(morphToPhone); function morphToPhone() { TweenMax.to("#bezel-macbook", 0.2, {morphSVG:"#bezel-phone"}); TweenMax.to("#camera-macbook", 0.2, {morphSVG:"#camera-phone"}); TweenMax.to("#screen-macbook", 0.2, {morphSVG:"#screen-phone"}); TweenMax.to("#shape-macbook", 0.2, {morphSVG:"#lock-phone", css:{opacity:0}}); TweenMax.to("#line-macbook", 0.2, {morphSVG:"#speaker-phone", css:{opacity:0}}); TweenMax.to("#touchpad-macbook", 0.2, {morphSVG:"#lock-phone"}); } } I also already read about the performance differences between JavaScript and CSS, so my next step would be to use more pure CSS and less TweenMax animations, but I wanted first ask you guys, if you have some better advices for me. I hope anyone of you can help me. Here again the links to my Codepen and demo... Codepen: http://codepen.io/mathis-krueper/pen/ZeQEzZ Demo: http://mathis-krueper.de/captain/references/ Thanks in advance!

Hey I have small issue with figuring out how to use the pathDataToBezier plugin, I've read a lot of similar topics, and probably I could do this with just some pure js or even pure css. But I wonder is there some simple way to animate few objects on the same path? I used some very simple example - right now, only the red 'planet' sticks to it's orbit, but it also ends in the different point it should - this should be just perfect closed orbit for all objects on it. I'm probably missing something very basic here Any suggestion on how to bite this would be a huge help ! There will be a lot of objects on that orbits, and I would love to have a lot of control there. http://codepen.io/Dikus/pen/VpwdNx?editors=1010 Thanks!

Hi guys, Is there a way to run morphSVG partial like drawSVG:"40% 60%" ? I want to randomize different "parts" of a morph (!?). Here just an example: http://codepen.io/mikeK/pen/WRBKrd Kind regards Manfred P.S. This pen might be a persiflage. But it is definitely the truth and not a fake code! Relations to living persons are obsolete.

Hey guys, I'm trying to figure out how to make this fish vector appear to make a flopping in-air animation. At first I was thinking that MorphSVG would be the ideal tool for this, but then diving deeper I'm noticing that there's so many paths I believe I would have to find an ideal shapeIndex for each to get a fluid motion. Transform gives off the whole 2D vibe since I'm using scale -1 to give the appearance of a reflection during the flopping animation. This is a link to a primitive attempt to use MorphSVG http://codepen.io/dylan9o4/pen/bgQLyP And this is a link to a primitive attempt using regular transforms http://codepen.io/dylan9o4/pen/dNQdxe Any help would be greatly appreciated!

Hi! I was wondering if there is the possibility to morph groups instead of single paths? Let's say I have two images/groups. Each image consists out of 30-50 paths, organized in two groups (one for each image). Now I would like to morph the first image (therefore group) to the second image (therefore second group). Is there a shortcut or do I have to morph any single path by it's own? Thanks! Clemens

the codepen works exactly the way I want. the animation disappears after it is done. However, I do get some errors in the console. rror: <path> attribute d: Unexpected end of attribute. Expected number Error: <path> attribute d: Expected number, "M0,0C" so I'm wondering what the correct way to do it.

Take a look at this codepen http://codepen.io/anon/pen/NdNmPg It morphs the two shapes by flipping and growing one of the lines when all it needs to do is tween outward. Is there something wrong with my svg paths?

in this example, I have two polygons that morph over time. and morphsvg works great when each individual polygon path is defined in the svg Here is a working example that uses 4 paths in the svg http://codepen.io/anon/pen/RKadzP However, I have many many years of data to deal with, and I'd to save time and combine the individual polygon paths per year, so I only have one div per year to deal with. but can morphsvg morph separate polygons defined in one path? Here is an example of the same paths above but combined per year http://codepen.io/anon/pen/NdNmPg but nothing shows up.

I have an animation that shows outlines of areas for few dates over years. As I move the slider I want to display an estimated date for each of the tweens. Meaning, if I have shape data for March 2010 and it's tweening to shape data September 2010 then as I move the slider I want to display the dates like March, April, May, June, July, August, September to show up as I slide. It seems like labels might be the answer but I don't know how to attached to each tween. Or maybe it's with the time property? ideas? Here is my code: var tl = new TimelineMax({onUpdate:updateSlider}); tl.to("#March_2010_small", 1, {morphSVG:"#September_2010_small"}, 0) .to("#March_2010_large", 1, {morphSVG:"#September_2010_large"}, 0) .add("scene2") .to("#March_2010_small", 1, {morphSVG:"#September_2011_small"}, "scene2") .to("#March_2010_large", 1, {morphSVG:"#September_2011_large"}, "scene2"); $("#slider").slider({ range: false, min: 0, max: 1, step:.001, slide: function ( event, ui ) { tl.progress( ui.value ).pause(); }, stop: function () { tl.play(); } }); function updateSlider() { $("#slider").slider("value", tl.progress()); $("#date").text(tl.time()); }

First off let me say that I love GSAP! This is a great plugin and I'm having a lot of fun with it. Now onto my issue I'm having an issue when I try to morph multiple paths that are separated by groups. The morph seems to be working ok, but the scale of the resulting image is very small. I'm thinking it has something to do with the svg itself but for the life of me I can't find the issue. Any help would be greatly appreciated. Thanks! http://codepen.io/rmarquardt/pen/JbOVWM

Ran into an interesting bug the other week. I was using DrawSVG to make an element follow an SVG path (technically a polyline), and Morph SVG's pathDataToBezier feature to grab and convert the polyline to path data. I found that if I named my polyline with a specific naming convention, MorphSVG broke. The ID name I used was path_1_1_1 and for some reason the specific sequence of a repeated underscore and a number broke the plugin. The console log reports "ERROR: malformed path data" but the path is fine; it's the _#_#_# name that breaks things. Please see attached Codepen for a demo. Changing my ID name fixed everything but it took a few hours of QA (and baffled coworkers) to resolve. Since I didn't see any online reports of this issue, I figured I'd post here to bring attention to it.

I'm playing around with a whiteboard drawing idea where a hand with a pen draws in the SVG. (i know it's not really a new idea - just playing around with it) I've got it working but when the hand jumps to start drawing in a new line, it's immediate. Wondered what the best way to tween the hand to the first coordinate of a bezier curve would be. Is there some built-in GSAP magic or should I create a bezier from the current point of the hand to the first point of the next line? Any ideas?

Hi I have an animation where I want the path data to change at a certain point so I'm using morphSVG. codepen link: http://codepen.io/pauljohnknight/pen/qNNMMz Am I correct in thinking if I want to reverse a morphSVG tween I have to do {repeat: 1, yoyo: true} within the object vars like i have done in the above pen? Normally I would just reverse an animation that is part of a timeline by doing the opposite of from / to etc on the next part of the timeline, but I can't do this with morphSVG because it would mean having the visiblity:hidden css on both compound paths which would then obviously make the animation invisible. I just want to make sure what I've done is the best way to achieve a reverse on a morphSVG tween incase there is a different / preferable way of doing this. It's going to be part of a larger more complex animation where there will be multiple compound paths I'll need to morph to a new shape and then back again. From what I gather I shouldn't use the reverse() method on an individual part of timeline because of where the playhead will start? And if I did, it could get very complicated very quickly doing it that way? Any thoughts / corrections would most welcome. Paul.

I'm trying to create a wave smoothing effect, where I morphSVG 2 paths together if you have scrolled passed a certain point. How can I make it animate from the bottom only? http://codepen.io/gizmojo/pen/QGMVLE See the issue here during animating between the 2 paths.

Hello guys, I recently started developing with GSAP and i love it so far, its really great but my problem is that i am not able to change the anchor point of the circle... even if we assign a top, left and bottom anchor point to it it just takes the default anchor point on the circle due to this issue the animation isn't the same on both sides and it looks really weird. does someone know how to fix this issue? i also saw a solution over here from OSUblake, but i am not able to figure out how to make that work http://greensock.com/forums/topic/14129-morphsvg-change-start-and-end-point/ kind regards

Hello there, I'm a complete newbie: I animate this logo: https://codepen.io/silverdesk/pen/ORromA The code is a mess, I had to create 6 timelines to do the same. How can I make it a function, I figure StaggerTo() will do it, but I can't find way to chain multiple morphSVG ... Is this possible? Thanks in advance.

For some reasons, the MorphSVG plugin is producing a strange little edge on the right corner of the SVG. Does someone of the pros have an idea how to fix this? Thank you!

I'm trying to come up with a "better" way to write these morphSVG animations. The issue is that I have about 100+ paths I want to animated all at once. Everything works fine but I'm assuming there must be a more efficient way to do this, maybe with some sort of loop and an array? Then a function that gets called each time it loops? As of right now my project has like 2000 lines of JavaScript and I'm not even finished! In the codepenn you will find a small example with six different elements I'm morphing at the same trigger point. Thanks in advance and have a great day everyone! Kind regards, -Bruno

morphsvg is amazing... I'm trying to get my code to do the following. I will eventually have 40 keyframes/paths inside my svg and I need to tween and use a slider to go through the animation. right now in my codepen example I have 8 keyframes. 4 pairs. the first two pairs are added at time zero and work well. but then the next ones don't fire off. what am I doing wrong? Thanks!