Jump to content

Search the Community

Showing results for tags 'morphsvg'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. 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.
  2. 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.
  3. 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
  4. 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.
  5. 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
  6. 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?
  7. 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.
  8. 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!
  9. 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
  10. Hello, I am completely new to Javascript and GSAP so my questions might be really stupid...I've played around with it for a few days but have not been able to figure out. I created these paths in AI so that the word "DECONSTRUCTED" will morph into lines - which I have been able to do in the codepen URL. However, I want it to YOYO back and stop when it gets to "c" and then have the "E" and "D" morph to a red (Or whatever color) "E" and a red "R" - so spelling out "RECONSTRUCTED". http://codepen.io/Karenhuang/pen/XKPqWo Any help would be much appreciated. And I am a Javascript newbie so I really don't understand any of the syntax. Everything I have done is through forking and trial/error. Thank you.
  11. 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!
  12. Hi, during my first project with GSAP I struggle trying to have tweens dynamically added to a main timeline. There’s a main timeline that gets a new randomized morphing animation based on SVG shapes. After the first keyframe in this child timeline I want to start a new concurrent animation on the main timeline. Unfortunately, the new animations aren’t visible. Also, I don’t know how to remove the completed child animations (kill, clear, remove?), as they are not needed anymore. Is this even a good way to do it? Simplified CodePen: http://codepen.io/rzschoch/pen/RRrmBB?editors=0010 Original CodePen: http://codepen.io/rzschoch/pen/jrWJNW?editors=1010 Thanks for helping out René
  13. 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!
  14. hellehs90

    Many tweens

    Hi! I have a lot of tweens I want to start and complete at the same time. Is there an easier way to do that than this code?: TweenMax.to('#charmander_path11', 2, {morphSVG:'#charmeleon_path8'}); TweenMax.to('#charmander_path1', 2, {morphSVG:'#charmeleon_path1'}); TweenMax.to('#charmander_path7', 2, {morphSVG:'#charmeleon_path7'}); TweenMax.to('#charmander_path3', 2, {morphSVG:'#charmeleon_path4'}); TweenMax.to('#charmander_path2', 2, {morphSVG:'#charmeleon_path2'}); TweenMax.to('#charmander_path4', 2, {morphSVG:'#charmeleon_path3'}); TweenMax.to('#charmander_path5', 2, {morphSVG:'#charmeleon_path6'}); TweenMax.to('#charmander_path10', 2, {morphSVG:'#charmeleon_path9'}); TweenMax.to('#charmander_path8', 2, {morphSVG:'#charmeleon_path13'}); TweenMax.to('#charmander_path9', 2, {morphSVG:'#charmeleon_path10'}); TweenMax.to('#charmander_path6', 2, {morphSVG:'#charmeleon_path11'}); TweenMax.to('#charmander_path12', 2, {morphSVG:'#charmeleon_path5', fill:'#CBD4DD'}); TweenMax.to('#charmander_path13', 2, {morphSVG:'#charmeleon_path12'}); I know you can make a timeline, but then all the tweens will happen after each other. Also, how would i repeat all those tweens without copying myself? Thanks
  15. Hello.. GreenSocked friends.. I just wanted to share this PEN CSS Mask / SVG Shape / GSAP / morphSVG http://codepen.io/HaunGO/full/ONYwBP/ Enoy
  16. Hello, I noticed Greensock has an npm package, however I noticed the morphSVG plugin does not have an npm package. When can we expect one to arrive? Thank you.
  17. Hi, I was just playing with MorphSVG on Codepen. The findShapeIndex() utility is awesome, but I seem to only be able to change the starting point of one shape, and I can’t figure out how to change the starting point of my second shape (a simple circle). The circle’s starting point seems to be stuck on the right side. Is there a way that I could change it to the top or bottom of the circle, so that both shapes have aligning starting points? Here is a rough example to illustrate my issue: http://codepen.io/ohem/pen/BKEaMp Any help is appreciated; this is my first time playing with MorphSVG so I might be missing something very obvious. Thanks!
  18. Hi there, Actually I am trying to achieve an animation using morphSVG plugin which is a scroll down indicator, as you can see in this pen which I prepared what happens is that the two SVG rectangles morph from top to bottom and that is fine but what I exactly trying to do is that after this step I want them to morph back again from top to bottom and not from bottom to top! Please advice, PS. I could not add the morphSVG plugin to this pen. Regards.
  19. Hi there, I've got a problem with MorphSVG. I'm trying to morph a circle into some kind of flower. Basically it works, but due to weird starting and endpoints of my path the animation is a bit quirky. I've already tried to use the findShapeIndex() utility, but it doesn't really help me as it only allows to change the starting point of my circle, but not the starting point of my flower. How can I set both - the circle and the flower - to use the top center point as anchor for the animations?
  20. Hi There, I'm new to Greensock and i have been playing a little with the plugin, especially the MorphSVG plugin. For my current project i'm using Greensock to animate some elements on the site but i'm also trying to achieve animated icons. Now i'm been searching to create a simple tween between 2 groups <g> but i read in old topics that it's just possible to do a one on one path morph. As i already include this library, and try to avoid including more, i would like to use MorphSVG for this without recreating available SVG icons with a seperated animation. Am i overlooking something, is there a workaround for this or should i look at some other library? With kind regards, Gerjo
  21. I am trying to get a curved arrow to grow along a path, but having difficulty making it work correctly. Does anyone have any suggestions on how to make this work? MorphSVG doesn't work as desired, as I need to have it look like it the arrow head is leading the growth, rather than just transforming into another shape. Right now my codepen uses a mask to gradually show the line and I am moving the arrow head along a path using "pathDataToBezier". Which works okay, but it doesn't synchronize with the mask animation... despite my efforts to change timing and positioning of the mask, there must be a better way!
  22. So I just used your codepen to make sure I could get my own basic shapes to morph. I works, but! I can't get this morph to work outside of codepen. I can only assume it's my js library links? I have these 4 linked along with tweenmax & morphsvg linked from my desktop. <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"> Please help me morph! Thanks
  23. Hi, thanks for your input and engagement in advance. Part 01: http://codepen.io/mikeK/pen/jqWJYj ok., but no random time. Part 03: http://codepen.io/mikeK/pen/yOerpb?editors=1010 random time super, but no animation of the tongue Next: I want to synchronize the arm and the signs (part of svg). What´s the best way to handle the animations? Just for fun and an example that I love GreenSock: http://codepen.io/mikeK/pen/qZbzdN?editors=1000 Best regards from Hamburg Manfred
  24. Clms

    Morph SVG Groups

    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
  25. Hi tweeners! I'm sure this is an easy one due to the skill level of GreenSock members there are 3 svg's in the pen, the last svg (#dot) tweens morphSVG to the 2 svg (#brush), the thing is that it morphs and goes to another coordinates... way to far. How to morphSVG a multipath SVG (#brush) and stay in the same place. THX!!!