Search the Community
Showing results for tags 'morph'.
Found 38 results
-
Hello Greensock. I'm playing arond with the MorphSVG Plugin but i'm having some problems. How can i morph between two svg with different number of path?! (please see the codepen for more details) I can also select the entire of path in each group but that's not the way. I will attach two svg also. Hope i can get the help. Thanks! work-svg.svg qd-svg.svg
-
When you hover over the photos a svg morphs. Displaying a white shape over the bottom of the image. If you hover while scrolling there's a 1px gap below the svg and the bottom of the photo. I've tried adjusting CSS and some other JS tests with placement of the morphed svg. But can't seem to make the 1px gap disappear on scroll. Any advice would be greatly appreciated. Thank you!
-
Hi all, I have been experimenting with MorphSVG and I am trying to make a button where the border morphs to a sort of arrow shaped border when you hover over it. This has been fairly successful but I see that the left side of the SVG morphs a bit and the animation still feels a bit too wavy. How can you approach a problem like this? I am not that experienced with MorphSVG and would love some insight.
-
Hi! I just started using the MorphSVGPlugin and I was wondering if I can change the transform value of the path. This is because the viewBox normally is not the same. But to use the plugin I thought I needed the paths to be inside the same SVG tag. Is there any way to change the transform value or the viewBox? For your information I am using ReactJs for this project.
-
Hi guys, I'm trying to give a color for each path. my issues is the color of the first path is applied to all the rest! thanks very much. site to see the animation: www.mwmtest.com/bio JS: // Signs Anim // var tlBio = new TimelineMax({ repeat: -1, delay: 3, repeatDelay: 0.2, yoyo: true }), earth = document.getElementById('earth'); tlBio.to(earth, 2, { morphSVG: '#fire' }, '+=1').to(earth, 2, { morphSVG: '#water' }, '+=1').to(earth, 2, { morphSVG: '#space' }, '+=1').to(earth, 2, { morphSVG: '#wind' }, '+=1'); CSS: #earth { fill: pink !important; } #fire { fill: yellow !important; visibility: hidden; } #water { fill: blue !important; visibility: hidden; } #wind { fill: green !important; visibility: hidden; } #space { fill: red !important; visibility: hidden; }
-
Hello Would you please think with me on how to make such animation https://revolution.themepunch.com/bubble-morph-effect-add-on-for-wordpress/ What I found special is that lines connect to each other when they become close and also get separated when moving away. Also about the moving shape, should we create an array of points where the shape morph to or there may be another better way for doing this
-
Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. MorphSVG's default settings typically deliver beautiful results but sometimes you may need to tweak things to get a certain effect or avoid weird transitional states or kinks. This video explains advanced features of MorphSVGPlugin that give you plenty of flexibility. Watch the video For more information and plenty of interactive demos, check out the MorphSVG docs. Happy tweening! -
My web development agency is looking for a freelancer to develop a full page slider image with morphing transition. We have a special request from our customer and are not experimented with GreenSock/GSAP. We would like something very similar than https://delcambio.me landing page. We will only need the image morphing transition slider code, that we will implement in our current project (Laravel/HTML5). Project: Start date: mid-March Slider delivery deadline: mid-April Deliver a working HTML file with all assets Specify licences to purchase if any Image sample will be given. (black background dominante) Please send us: Libraries and versions required (GSAP? TweenLite?, jQuery? +++) Estimated delivery time Expected price for the task If you have a portfolio with similar work that would be perfect! Thanks. Adrien. adrien@acte-solutions.com
-
Hi GSAP community! A huge thank you because thanks to you we can do something beautiful! For the needs of my future company that I am develloper I need to do a scroll action like this example> https://codepen.io/GreenSock/pen/GopRwQ I get there very well except that I wish 1. Have my line continue in draw svg until the end (scene with scrollmagic) 2. Stop the blue circle at a certain position while element 1 continues to end. (scene with scrollmagic too) I can not stop my tween blue... Can you help me ? thank you in advance
-
Hello I am new to GSAP and wanted to learn how to morph svg shapes with one another while masking an image, I seen a great example of this on codedrops but they are using anime.js where I wanted GSAP as I have already begun to learn an implement things with it. I have tried to change the animejs to gsap with much failings. Could some one please provide an example I can work from like another forum post or tutorial that could relate to what I wanted to achieve or possibly fork the codepen example with some learnings I could take home. Thank you! Adam.
-
Hi all, I'm trying to make a menu with SVG icons that morph into Xs and back on click. So far I can get them to morph and morph back as the menu closes but I'm stuck on trying to get one icon to revert back to its original shape when I click the other icon. Where am I going wrong?
-
Hey Guys, I'm new to GSAP and reading through docs to find out if a particular effect can be created with GSAP. The link below shows the animation in motion and I've created most of it except the distortion that occurs when the mouse moves from one section to another. Can this be done with GSAP, if yes, how? https://www.pinterest.co.uk/pin/466755948875173685/?lp=true Thanks.
-
I'm trying to create a function that would morph through a series of paths to reach destination. The codepen below tries to do that, but does not move. I did a function with just one intermediary (no group) and it works:
-
Hi guys, I am trying to replicate an effect I have seen implemented with animate.js while using some sort of parallax effect and morph, and would prefer using GSAP for this. Original pen (replicated from a Codrops article on svg Morphing) can be found there: Ultimately, I'd like to "invert" the condition of the effect, meaning that when my mouse gets close to the shape, that shape gets "attracted" or snaps to the mouse, up to a point where it snaps back to original place. Best way to put it, I'd like to make a "Magnetic goo" that's dynamic when the mouse enters my container, and snaps back when mouseleave. (that's what I didn't quite like with the original implementation, it goes all over the place). I could probably just alter the original pen above and transform it to GSAP (anyway to do that btw?), but mouse positions are still quite obscure to me and since I'm new to GSAP and wanna learn it, I guess it's better to ask the pros! Any pointers to the best technique with a starting approach would be very well appreciated! Approach: - I've thought originally of using the "paralaxit" code of @Sahil as a starting point, in a related post here: So that's what I implemented so far in my pen. But I have no idea how to change the d values of my path themselves slightly to follow the same idea, instead of the shape as a whole and its scale. My second approach was potentially to use gaussian blur and color matrices by creating a small "dot" that would alter my shape when the mouse enters the container, similar to what was done in the pen below. Would that be a better approach? Thanks in advance for your help and pointers! PS: If I need to start with a simpler shape, to understand the approach better and simplify calculations, I'm down for that. I'm as much interested in understanding the process itself than achieving the result I have in mind!
-
Hello, All I am trying to do is morph one shape (#step0) into (#fullFace0) after a 0.42s delay for 1s and then into (#fullFace0). I've done this before and I'm not sure what I am doing differently causing it to not work. The paths are all siblings with the destination morphs having display:none. I was getting a weird log in the console, but I looked that up and it was because the Morph plugin wasn't being added properly. That is resolved now, but I'm not sure why this morph isn't taking place. Thank you!
-
Hello, Morph Plugin is not for free? if not....exist some time unlimited version? Thanks
-
Super Newbie here, just trying to get the hang of GSAP (which is pretty awesome so far). I wanted to know how these dots can animate until they morph into the letters, ie I don't want them to animate forever and I can't quite get the timing down so they stop once the dot becomes a letter. The other thing is my code is rather large and I assume there is a way to shorten up everything. Maybe wrap functions around things ... Also the fill to white isn't working at the end. Any help is much appreciated! Shawn
-
First, I want to say thanks for all the hard work put into the greensock tools. It's fantastic. It might be a stretch, but I was wondering if the MorphSVGPlugin might have some method for calculating the difference between 2 svg paths. Essentially, I want to calculate how closely 2 shapes match. Say for example I have a 200x200 square, 300x200 rectangle, and 300x300 star. Comparing the square and rectangle would return a higher accuracy value than comparing the square and star, since the square and rectangle paths match more closely, so to speak. Currently, im just comparing the area of the shapes, but it can only get me so far and I feel a path comparison would be more accurate. Perhaps there are methods in the precompiler that I can utilize? Any way to measure the total offset of the path after it morphs? Any pointers are much appreciated!
-
Hi @GreenSock I think about something, but without affecting to your bussiness model, can i do that? I explain this below: Let's say, i creating web-sites, mobile apps, own personal websites with one-off sold, as i know one-off sold doesn't require GSAP license. If i'm create plug-ins (GitHub repo, No-License, without license no-one allowed to use app) for GSAP for myself like morphSVG, drawSVG (i sure your plug-ins great, but my budget not good to be member of Club, thanks to GSAP anyway), i not required to buy license? I can use GSAP for free, usually i'm use TweenMax, TimelineMax. Thanks for reply.
-
I have a creation that is making use he GSAP premium add-on: morphing. https://www.redgearstudios.com/Working/PitneyBowes/MorphTest/ Seams that this add-on...which i acquired from the Greensock site as a paid premium member. Unit displays in Safari, Chrome, FF. Although in Win7, Win8 & Win8.1 with browser IE11....its a no go! Does the morphing add-on have limitations that aren't fully disclosed on the site? And if they are on the main site....i might have simply skimmed over them...frantically looking for a solution. Any help please!?! Bryan
-
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 .
-
I am using the morph function to tween from 4 SVG paths to 4 other SVG paths to mimic a vault door shutting. All the paths are morphing in the right way, except for one path. The #doorfront to #doorfront2 paths are morphing in the wrong direction. Can anyone give me a hand? Thanks! bonus help points I need to have the mouse off to open the door back up. I can figure this one out though..... if someone could just help me with the door morphing issue that would be great! Thanks!!!
-
Hi, Newbee here, I'm looking for the simplest way to toggle back and forth [ morph ] between two svg icons. That's it... Thank you for your time!!!!! -
Hello, I'm trying to get a smooth animation with MorphSVG: http://codepen.io/carlbren/pen/pEYkRg The steps should as smooth as these ones: http://codepen.io/waterfallmedia/pen/ZbOjRO http://codepen.io/GreenSock/pen/WQjRXE (see the cape animated with waveSVG which is not supported) http://codepen.io/osublake/pen/meepJE You can see a stop between the steps in my animation. Please, do you have any idea of what I could do to not feel the steps in the animation? Thanks!
-
Hey there, I just discovered Greensock yesterday and am so far very impressed! I have a wheel chart (which you can view via the codepen url, although I'm not including the animations because they're tied to my server), that I want to animate in to various states (such as hiding certain wedges or changing the proportions). I'm currently doing all the math for the chart server side and what I'm handing back when I change states is a list updated paths (1 for each visible wedge, just to be clear) for where I want the wedges to end up. I'm using TweenMax.to to morph each wedges "d" attribute to its new one, but they morph there in a straight line and I'd prefer that they do so along a bezier. I know of the bezier plugin, but from I've seen that seems to be only for animating static objects, and I want mine to be stretching or shrinking as they move. Is it possible to combine the bezier plugin with what I'm doing? Many thanks! P.S. if this is something that is doable only by joining Club Greensock, that is fine.
.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
