Search the Community

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é

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!

Hey, i'm curious if i am not getting something. I recently tried a SVG animation using the MorphSVG plugin. I grabbed the path data with jQuery like so: var myPath = $('#myPath'). When i used the variable in the MorphSVG plugin (.to("#circle", 1, {morphSVG: myPath})), i got the following error in the console: "WARNING: invalid morph to:" but when i grabbed the variable with document.getElementbyID it worked. Now, did i miss something, or is this an error?

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

Hello.. GreenSocked friends.. I just wanted to share this PEN CSS Mask / SVG Shape / GSAP / morphSVG http://codepen.io/HaunGO/full/ONYwBP/ Enoy

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!

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?

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

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

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!!!

Just wondered if any geniuses out there had any tips for a clean undulating animation for a path? Like a balloon string, or water, or a cape or sheet in the wind? I know there are various ways to approximate it, and I have fiddled around a bit previously, but wondered if there is a good method to do this. Perhaps an SVG path with lots of points and straight lines between, where you can run a stagger animation on the points? But then you'd have to be able to target points specifically in the SVG somehow. Would love to know your thoughts. Very basic example included, but you can see the curvy paths with control points don;t animate so well. Thanks

Hello, I have a square that I want to morph into three circles. Is it possible to morph one shape into multiple smaller ones in one transition - versus having it transform into each individual shape? The Codepen I've included has a square that transforms into one blue circle - but the actual 'whole' shape is three circles lined up. Thank you! tl = new TimelineMax({}); MorphSVGPlugin.convertToPath("circle, rect") tl.to("#red", 1, {morphSVG:"#blue", fill:"#0000FF", ease:Back.easeOut.config(1), y:0}, "+=0");

Hi, After reading the documentation on how to morph more than two objects, it seemed like the code wasn't any much longer. However I'm wondering if I'm missing anything within my code that is preventing that, as the shapes only morph from the first to the second and gets stuck there. It doesn't move on to the third shape. http://codepen.io/anon/pen/pgKEQP Thank you - I really appreciate it! TweenMax.to(pink, 2, {morphSVG:"#red", fill:"#ED1C24"}, "+=1") .to(pink, 2, {morphSVG:"#black", fill:"#000000"}, "+=1");

Hello, I was following along with the MorphSVG demo, and was wondering how you would change the color of the second shape? Both shapes have their own color, but the morphing keeps it at the #start fill color. http://codepen.io/anon/pen/jWxeVY Thank you!

Hello, Im trying to use MorphSVG but it isnt working. I made a realy simple example but even this doesnt work. So basically I want to first use DrawSVG to draw a stroke and then morph it into a filled shape (not in codepen). But the morphSVG isnt working. I created a very basic codepen and even this is not working. Could it be because of my SVG?

A few days earlier I know, but I am off to the beach tomorrow. I wanted to say a big THANK YOU to the awesome GreenSock team. Thank you for all the new features, plugins and the incredible amount of work put into the GSAP tools that make our lives so much easier. Also a big thanks to everyone contributing to this forum for helping newbies and pros getting to know GSAP, brainstorming ideas and for simply being so helpful every time. https://ihatetomatoes.net/happy-new-year/ Happy new year. Petr

Hey guys, Been having a go with morphSVG which is pretty amazing. The answer to this may be simple ("your shape is too complex") but I am so close to a good result, thought I would ask. I've done three morphs on three different words in this Balloon animation - its a subtle shift which make the words appear to be on the balloon. In all three cases the morph works perfectly – except for the counters of the letters 'swapping' during the animation. This is the only issue on all three morphs! I wonder if there is anything I can do about it? I suppose I could break up the lettering into separate morphs, but: 1) wondering what that would do to performance 2) its a big extra hassle on the design front, but can be done Alternatively, I go for a 'less accurate' tween and abandon the morph for a scale/squash somehow. Thanks for your advice! NOTE: Have a play with my pen. The final animation will have three balloons saying You Made It! You can show and hide the words using the code and animate them.

I couldn't get a simple MorphSVG to work in my project, so I copied snipets from my code and put it in a codepen. It works fine there. The svg loads fine, and I hide the part I want to morph to fine. But when I run the TweenMax (which I confirmed is being hit in the code) nothing happens. No errors, nothing else breaks, just nothing happens. I don't get any console errors. jQuery, TweenMax, and MorphSVG are all included properly and the files are in sources.

Just to demonstrate how to rotate two cubic bezier control points from an existing SVG path, and then morph them, I copied the _createSVG goodness from the MorphSVG Plugin Banner Pen (http://codepen.io/GreenSock/pen/WQjRXE), and used the points of the array in the cubic bezier generated from var bezier = MorphSVGPlugin.pathDataToRawBezier(pathData)[0]; to then rotate the first two control points along my path. My rotate function is very simple, as I'm trying to get a handle on rotating control points, and hopefully this post can help someone else. function rotate(x, y, angle, bezierPathOrdinalPosition) { var _DEG2RAD = Math.PI / 180; angle = angle * _DEG2RAD; var sin = Math.sin(angle); var cos = Math.cos(angle); // Rotate by (angle) radians. // var dx = (x * cos) - (y * sin); var dy = (x * sin) + (y * cos); return { "dx": dx, "dy": dy, "pos": bezierPathOrdinalPosition }; } My question is; why are the points not rotated "upwards" and to the left, as in being rotated as if they were in the quadrant of the positive x and positive y axes of the 2d coordinate system? I don't understand the rotation being applied, vs. the math I used. Also, I'm not entirely sure which to which anchor (the black dots) these control points are related. Help me, Obi Wan. -Dan

Hi, I have animated SVGs with success using the morphSVG plugin within Edge Animate via the EdgeCommons library. For banner development Sizmek and DoubleClick don't host the edgeCommons library and to include it in production is almost prohibitive (69k). A solution is including only the EdgeCommons.Core.js and EdgeCommons.SVG.js. Unfortunately in doing this the latest version of jquery has to be downgraded (hosted by SIzmek and DoubleClick) and banners are limited to the number of assets. Is there an alternative to EdgeCommons? to access the SVG ID's. The solution is based on this question. http://greensock.com/forums/topic/11131-svg-plugin-with-edge-animate/ The code below works - (it's not pretty) and it relies on the libraries: https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/jquery/1_11_3/jquery.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/TweenMax.min.js EdgeCommons.Core.js EdgeCommons.SVG.js MorphSVGPlugin.min.js EC.SVG.accessSVG(sym.$("png_upper")).done( function(svgDocument){ // var svg01_a = $("#upper_baseShadow",svgDocument)[0]; var svg01_b = $("#bulge_baseShadow",svgDocument)[0]; // var svg02_a = $("#upper_base",svgDocument)[0]; var svg02_b = $("#bulge_base",svgDocument)[0]; // var svg03_a = $("#upper_keyline",svgDocument)[0]; var svg03_b = $("#bulge_keyline",svgDocument)[0]; // var svg04_a = $("#upper_txt",svgDocument)[0]; var svg04_b = $("#bulge_txt",svgDocument)[0]; // //Animate Tablet var a = .3; var d = .1; var r = 1; var tablet = sym.$("png_upper"); var pbg = sym.$("PBG_lower"); TweenMax.fromTo(tablet, 2, {scaleY:1, scaleX:1}, {scaleY:2, scaleX:2, onComplete:svgEffect, ease:Elastic.easeOut}); TweenMax.fromTo(pbg, 3, {x:0, scaleX:1, scaleY:1}, {scaleX:1.2, scaleY:1.2, x:100, ease:Elastic.easeInOut, delay:.7}); function svgEffect(){ TweenMax.to(svg01_a, a, {morphSVG:svg01_b, repeat:r, yoyo:true, transformOrigin:"50% 50%", ease:Sine.easeOut}); TweenMax.to(svg02_a, a, {morphSVG:svg02_b, repeat:r, yoyo:true, transformOrigin:"50% 50%", ease:Sine.easeOut}); TweenMax.to(svg03_a, a, {morphSVG:svg03_b, repeat:r, yoyo:true, transformOrigin:"50% 50%", ease:Sine.easeOut}); TweenMax.to(svg04_a, a, {morphSVG:svg04_b, repeat:r, yoyo:true, transformOrigin:"50% 50%", ease:Sine.easeOut}); // } } );

Call it try before you by, I guess, but I'm trying to understand the dramatic difference between what `MorphSVGPlugin.pathDataToRawBezier` returns, vs. the original raw SVG path data. To produce the cape wave effect, I've noticed the "MorphSVGPlugin from GreenSock" pen applies a rotation to the points of the bezier array, originally created like this: bezier = MorphSVGPlugin.pathDataToRawBezier(e.getAttribute("d"))[0] However, my pen indicates a dramatic difference between the original points of an SVG path, and the result of calling `MorphSVGPlugin.pathDataToRawBezier`. They are obviously not the same, I'm sure for good reason, but my curiosity is getting the best of me. What is the relationship between the two? http://codepen.io/dotComb/pen/zvXjyN

Are there guidelines for how to make a vector graphic that will need to morph? I want to morph a complex vector graphic into another complex vector graphic. These vectors had clipping masks in adobe illustrator. How should I save these so the SVG code works well with the morphSVG plugin? Are there any tutorials on how to morph a complex vignette like the one shown in my codepen link? Guidelines for making graphics that will be converted to SVG will also be helpful for designers who make these graphics for me to convert. http://codepen.io/nsohail92/pen/zvbeOE

Hi all, I'm a bit confused on how to get the following result. I want to create an animation of different SVG elements that does the following (see the codepen link for the idea): start: Animate menu bars in start: morph menu bars to logo letters onHover: morph logo letters back to menu bars onClick: animate menu bars into a closing button The start is there, but I am not sure how to reverse just the logo letters back to menu bars on hover. I hope you guys can point me into the right directions! Thanks

I can work on Codepen with MorphSVG just fine, and it's amazing! But, as a member, and I downloaded the latest GSAP with the MorphSVG plugin, but for some reason when I take my codepen demo and rebuild it locally (referencing the local MorphSVG, not the codepen exclusive version), all tweens work besides the morphing ones. including DrawSVG. Does anyone know of something I could be missing? It seems to just be the Morph plugin. Any help would be greatly appreciated!

I've got an overlay that I have moved to the back of my page, so that it doesn't block my hover animation on the 2 circles. #open { visibility: hidden; z-index: 1; } When I open the overlay, I need it moved to the top, so that it will cover the circles, and also block their animation. My set doesn't seem to have any effect though. tl2.set('#open', {zIndex:5}) .to("#closed", 1, {morphSVG:{shape:"#open"}}) I've tried moving the set around the tl as well. It doesn't seem to work no matter where in the timeline I put it. I figure I probably want it at the beginning though, so that the morphSVG animation covers up the circles immediately.