Search the Community
Showing results for tags 'morphsvg'.
Found 124 results
-
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
-
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 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, 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!
-
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?
-
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.
-
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
-
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.
-
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
