Search the Community
Showing results for tags 'morphsvg'.
Found 124 results
-
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");
-
Hello, The following code pen example shows unwanted morphing behavior: http://codepen.io/anon/pen/YwJZBe I played around and realized that the underlying issue is caused by the value in the paths 1e-5 and 10e-6. The following changes: Change 1e-5 to 0 in path1 Change 10e-6 to 0 in path2 can be seen in this codepen example: http://codepen.io/anon/pen/bEmWOp And this is the expected behavior. I am using Inkscape to create the svgs. I played around with the precision and saving as an Inkscape SVG, Plain SVG and Optimized SVG, but I didn't have any luck getting rid of the precision whilst preserving the shapes. A quick Google search on how to handle numbers in that notation turned up this stackoverflow: http://stackoverflow.com/questions/10943997/how-to-convert-a-string-containing-scientific-notation-to-correct-javascript-num Would it be possible to have the MorphSVG plugin filter the numbers in that way? Could I get an unminified copy to make the adjustment myself? Or can anybody offer some other work around advice. Thanks!
-
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!
-
Hi There, Does anyone have a recommended workflow for using Club Greensock plugins ( e.g. MorphSVG ) alongside the NPM package within a package manager ( notably JSPM )? Should one just brute force the plugins into the build and manually download/unpack/copy updates as needed? Using something more manual like Grunt + Bower, this isn't as much of an issue, but moving off of bower in favor of NPM / JSPM ES6 module-based workflow, it gets a little tricky. Looking for any advice to help keep the project and its dependencies nice and clean. Thanks in advance for your help! J *Edit: similar question here: http://greensock.com/forums/topic/13556-how-do-i-access-pluginsother-packages-from-npm-gsap-package/?hl=es6 This sorta answers my question, but searching deeper into the forums now it seems something like NPM/ES6/JSPM compatibility is a work in progress, with the special plugins having to be manually added and mapped accordingly. Will start the trial and error process....
-
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
-
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'm having some problems with MorphSVG. The latest version seems to be crashing every browser other than Internet Explorer 11 (which works, amazingly!) with a little morph I've made. (Chrome, Firefox and Opera all crash) I'm not sure If I've done something wrong, if inkscape has created a slightly dodgy svg file, or if it's a bug in the latest version of MorphSVGPlugin. I can't get any error data as it totally kills the browser tab. It was working in the version of MorphSVGPlugin dated 13/10/2015, but it wasn't setting the shapeIndex correctly on the A's in my morph, nor was setting that value making any difference to the resultant morph when I changed shapeIndex manually. I decided to use your codepen to check I was doing it correctly so forked it and the crashing behaviour started. Since then I've updated my local copy of the plugin (dated 21/10/2015) and it's now crashing in everything other than IE on my webpage too. Does anyone know what's going on? Note that the latest version now sets the shapeIndex correctly (at least in IE, I can't see the others as they crash), so that behaviour seems to have been caused by the older version of the plugin I was using. Cheers, Paul -
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!
-
Hi there, I've been enjoying making some animations with GreenSock today and I've run into a problem. I have a feeling that the solution is simple and that I am just missing it through sheer obliviousness. Perhaps you could point me in the right direction. I'm working with a compound path that I made in Illustrator and saved as SVG. My two paths are described using the d attribute, with one shown and the other {visibility: hidden}. I'm attempting to use the morphSVG plugin with TweenLite. I've tried: using the id name as a string "#hamburger" saving the element in a JavaScript variable and passing that in passing in the path string from the d attribute. None of these options is working for me! From the docs vs my code: TweenLite.to("#circle", 1, {morphSVG:"#hippo"}); // GSAP Docs TweenLite.to(hamburger, 1, {morphSVG: "#hamburger"}); // My Code When I try using a JavaScript variable, the console error is: invalid morphSVG tween value: [object SVGPathElement] When I use the id string, the console error is: invalid morphSVG tween value: #close When I use the path string, there's no console output. However, watching the containing div's classname, I can see that the code is being run. I thought the case might be because I was using compound paths instead of simple paths. I made a circle and star path in Illustrator and tried to use those instead. Same problem as far as I can tell. Well, if you could give it a try on the CodePen and offer a suggestion as to how I can address this I'd appreciate it. Thanks!
-
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.
-
I'm trying to recreate this demo in GSAP. http://tympanus.net/Development/FullscreenOverlayStyles/index9.html My codepen isn't working at all, and I'm not sure why. And yeah, I know it might be the "closed" shape, because it's 0px wide everywhere (so maybe non-existant?). I've tried it with <path id="closed" d='M500 100 L600 600 L600 0 L0 0 Z' />, and that didn't work either not sure what's up here. Maybe visibility issues?
-
Hey, i'm testing with the new MorphSVG. I forked a pen from GreenSock and changed it, everything working fine. Here is the result: http://codepen.io/JBusch/pen/GpxYjV If i try to reproduce it in a real life example, but the output looks totally different and i'm totally lost. The example can be viewed here http://wiederwald.de/exploring/ Would be very thankful for some help. Best regards Johannes
-
Hi one and all - I have a small test that has produced nothing on my site but I just loaded it to Codepen (from "Morphing Countdown" by Chris Gannon) and I get nearly what I was after Is there something else I need to load apart from MorphSVG & TweenMax? Perhaps I should load these some other way? Internet Explorer is showing "Cannot load a null target" TweenMax.min.js (16,27469). I have it loaded on my site at: www.ezpc.eu/anitalouise.html Thanks to anyone who has time to look at this - Trev
-
I'm attempting to make the blades of grass sway back and forth and was wondering if that's doable. I've tried using MorphSVG, but found the results to be pretty terrible in regards to the motion created even when adjusting shapeIndex values both positive and negative. I don't have a demo ATM just curious on others thoughts based on the image attached. Achieving this life like motion is pretty difficult for me currently so would love to learn a bit more how to achieve this.
-
I've got a complicated background image that I want to move subtly. I was thinking I could morph it back and forth between a few different versions, with the same number of polygons, but slightly different points/colors. As far as I can tell (I'm new to GSAP) morphsvg will only take one svg element and morph it into another, but doesn't morph one full svg into another. Maybe I can loop through an array of polygons in the svg to morph, but I think that would take forever and really bog down the site. I don't have to use morphsvg of course, but I can't think of anything else really that would give me a nice slightly shifting effect.
