Search the Community
Showing results for tags 'morphsvg'.
Found 124 results
-
Okay I'm fairly new to GSAP but I think I've found a bug. Maybe I'm using something wrong or maybe it's a bug. Whatever it is I wanted to just highlight it to the GSAP experts incase it really is a bug and not me using the animation library incorrectly. First and foremost I should Tell you that I've tested the codepen animation on ALL major browsers. The animation works correctly on IE, Edge, Chrome, Various Mobile Browsers. The only browser that doesn't render the animation correctly is Firefox. I'm using the latest version of Firefox by the way. Okay so the bug I'm referring to is the various "Eyes" that are following a path (I've highlighted the path for your convenience). The eyes are not following the path correctly on Firefox. What I wanted was to make the eyes appear from one mobile and go into the other mobile. This is happening on all browsers except firefox. I apologize for the long SVG code. The two paths I'm using for this are found at the very bottom of the svg code. One path for the "dollars" and the other for the "eyes". The relevant javascript code for this is from line 1 to line 16. Thanks!
-
Hi, The gulls are flying* ... Only gulls - mmhhh. Here in a 'short story'. Sometimes I want to change** the world - at least a little bit. But it will take some time. Be patient. Kind regards Mikel * A fork of Blake´s code (his pen). Morphing by 'cycle' and handling some risks. ** The will-change property provides a way to hint people about the kind of changes to be expected on an element, so that we all can setup appropriate optimizations ahead of time before the element is actually changed. By the way: The claim originates from a poster on a pub door in Hamburg during the last G20 summit. Everything else is f(r)iktion.
-
Hi guys, Tween for tween ZUMI is becoming alive. Thanks CARL. And I am proud to present the small advances. The challenge is an optimal interaction of SVG elements and the possible animations. That means trial and error - and a lot of time. But it is an entertaining pastime. And learning by doing. By the way, the 'more' part - an adaptation of Blake's pen - is integrated somewhat unorthodox. I'm still not fit in JS. But I've already found another example of Blake to control start and stop function. For the moment I have no concrete question. I have to clean up the SVG and the code a little. And I still experiment with movement sequences which I can store using later by add and progress. As ZUMI already says: See you. Mikel P.S .: ZUMI is the mascot of a dental practice in the neighborhood especially for children. With a bit of imagination, I hope to arrange an entertaining story for the kids.
-
Image: https://www.dropbox.com/s/r2tgtnenucbz3dt/Screenshot 2017-07-23 14.30.07.png I'm trying to make the image on the left (a staple) morph into the image on right ("S") by bending the path into place vs. the effect I currently get with morphSVG. The effect I currently get is more "blob-like" when the transition happens vs. a smooth and graceful bend that I prefer. Any suggestions to help me get on the right "path?"
-
Hi , My problems are The morphSVG Tween runs on local properly, but not in this pen (invalid morphSVG tween value: #mundAuf02)?? The "onComplete" does its job in the first run, but not on restart (local). I plan to use the "onComplete:talking" several times with different 'moves'. How could this different var be implemented? Kind regards Mikel
-
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.
-
Hi guys, Setting and expecting limits unfortunately C disappears once in a while. My pen: http://codepen.io/mikeK/pen/QKwrGG How should I interpret the limit scale:randomNumber(0.5, 1) ? Kind regards Manfred
-
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 -
Hello great almighty GSAP forum, here I am with another question I'm having. Goal create some sort of traveling trail emitter that follows the object and being manipulated by scroll event. Also everything is responsive, relative to the SVG size.Progress/ attempts Got most parts working, however there're a few visual things I just can't figure out. I've tried manipulating x,yPercent, transformOrigin, svgOrigin on the <image> tag inside the <svg> Help needed I'd like to know how to make the image's transform origin to the tip or tail of the arrow how to properly adjust the emit position so it sync with the arrow tail.. Actual travelling route doesn't have to follow the predefined path strictly, it's more important getting the emitter right. I don't know how autoRotate works under the hood, by the look of the relationship between particle and the arrow position, seems like a "invisible bounding box" is created, and the arrow rotate inside the box, and the box takes on the bezier curve data. Question outside of this topic Why isn't <image> tag visible on Safari, let alone IE?? The emitted particle shows on Safari but seems the percentage position is way off? Seems like line 48-51 behave differently on Safari. Added on 19th of April To answer my own question for peoples reference. <image> tag needs an inline width and height attribute in browsers other than Chrome, somehow other browser can't take the CSS and apply it to <image> tag within svg; Thanks a lot!
-
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.
-
Hey guys, I just joined the club membership program to unlock the features of MorphSVG. I've been just trying to follow the basic lessons to see if I can even get the plugin to work. Sadly it is not. My rect was turned into a primitive shape, and I read that MorphSVG plugin cannot work with anything but paths. I used the "converToPath" script successfully turning my shapes into paths. Sadly they are still not morphing. Could someone please take a look at my codepen and let me know? Thank You
-
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!
-
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.
-
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 .
-
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()); }
-
Hi everyone, do you want feel magic of GSAP's morphSVG? Or if you think about buy membership, but not sure, i sure, after see it you buy it in anyway. http://codepen.io/dalisoft/full/yVmLVO/ If you like it, please Like it. Thanks to @GreenSock for amazing library and all of helpers for fast reply
-
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.
.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
