Search the Community

Hello all! I love the GSAP very much and am most likely about to purchase a membership so I can use MorphSVG in my projects. However, as I was playing around with the plugin in codepen, I noticed this odd border around the outside of the SVG shape I'm morphing. What is causing this? I tried setting the stroke-width to zero and that did not work. I deleted the stroke-with property all together and that seemed to work but I lost my opacity settings. Anyone know what might be causing this issue? Thanks! codepen: https://codepen.io/Wcomp/pen/aPOZGo?editors=1100

greetings animation engineers, In the attached pen you will see the morph from the map into the logo, you will notice that the map is composed of three parts, which you had advised me to consolidate into one path in order to do the morph into the logo which is also a single path.. But now I would like to do the following: The map should pulse RGB at a heart rate based on distance of the mouse, and then it will morph into the logo according to its current behavior. So for example if we compare the map animation to a heartbeat, should the animation increase its rate linearly based on distance or at an accelerated rate (exponentially) how would you create such an animation? I have succeeded in animating tilts on x and y axis based on mouse positon as can be seen in many playing card demos on codepen, where you add shine and tilt to the element as controlled by mouseX and mouseY, so how would one go about it in this case? where you would be changing pulse rate based on distance.

Greetings everyone, I was able to morph from one path to another : this pen however what is the proper technique to use when there is not a 1:1 ratio, for example, in the attached pen (in the subject line) you can see I am morphing the man into the hulk, but the man is composed of many paths that I painted out in illustrator, as you can see its very slow, and they are all morphing into the same path.. As well you see that the svg is cropped by the viewbox, and I am having some trouble fixing it.. what is the method to work with morph when the ration is not 1:1, i guess if its only a few paths the user might not notice, however in this case you can see it just looks weird. what I am thinking of doing for this project is cutting down the amount of paths on the man, to say 10-15, and then have the paths on the man morph into different svg skin textures on the hulk, and then afterwards fade into something like a rastor image.. something similar to what guy so expertly did: this pen ** disclaimer: I will not be the designer on the project I will just be implementing the code, so what should I ask the designer to do?

Hi, everyone! I want to save prev shape of my morphsvg on the screen. So in this codepen example at the end of animation would be circle inside the elephant. Any ideas? The first thing that comes to mind is to duplicate the path in svg manipulating the DOM, but i think it's ridiculous.

I have made a 'day' scene. When the mouse clicks on the sun, it changes to the moon. When this happens it would be nice that the background also changed. How is the best way to do it? I'have added 2 skies and 2 grounds. One is for during the day and the other one is for the night. <g id="sky"> <rect id="night" class= "nacht" x="1.4" y="1.2" class="st0" width="841.9" height="472.3"/> <rect id="day" y="1.2" class="st1" width="841.9" height="472.3"/> </g> <g id="ground"> <rect id="light" x="-0.4" y="473.6" class="st2" width="841.9" height="121.7"/> <rect id="dark" y="473.6" class="st3" width="841.9" height="121.7"/> </g> I'm thinking about to add an timelineMax or an TweenMax. How do you handle this? I have no idea how to start... Can someone please help me? Thanks in advance

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?

Hi, I'm doing a simple morph that repeats between two shapes (with a rotation on as well). When the animation runs, it morphs, then seems to pause for 3 seconds, then seems to do a fluid repeat morph between the two states (which is what I want), and then starts again? How do I get a morph to fluidly go from one shape to another on repeat with out the pause. I'm using yoyo: true as well and thought this would solve it? I'm flummoxed. var tl = new TimelineMax({repeat: -1, yoyo: true}); tl .to("#shape-1", 3, {morphSVG:"#shape-2", rotation: 180, ease: Power1.easeIn}) .to("#shape-2", 3, {morphSVG:"#shape-1", rotation: 180,ease: Power1.easeOut}) Many thanks,

Hi, For a recurring animation I wanted to tween a fromTo-Progress and ran into the 'trap' immediateRender. So here's an example: when multiple fromTo () - based tweens are animating the same proprets of the same object. And applied here in a thoroughly funny cartoon for a serious cause: Kind regards Mikel

Hi, I'm trying to morphSVG on Slider page transitions. I have been able to get the slide transitions working. However I can't seem to figure out how to cycle through the multiple SVG's. Problem: How to cycle through SVG list as each slide goes down. Example: I have managed to have it change on scroll down and scroll up, but this limits me to just the 2 blobs. I am after; Slide 1 to have svgblob1 Slide 2 to have svgblob2 Slide 3 to have svgblob3 Slide #n to have svgblob#n I have used Mikel's Pen found in the comments here as a solid base: Thank you in advance

Recently was trying to replicate the above codepen in a react component with gsap and the animation completely fails, it doesn't even start or trigger. Can someone help me look for bugs? The codesandbox link is here : https://codesandbox.io/s/402ov4lyr7 Please Help.

Hello, I'm very new to GSAP and also very new to coding. I recently became a Club Greensock member, because I wanted to use the MorphSVGPlugin in Adobe Animate. However, after reading through the forums a bit I learned that MorphSVG doesn't work with Canvas (or something like that)? So now I'm trying to see if it's possible to use MorphSVG directly with Adobe Captivate (I usually build things in Animate then add them into Captivate as a web object). I can't, however, seem to get MorphSVG to work this way either. I've created an external javascript file called 'My.js' and I've loaded that, along with TweenMax, MorphSVGPlugin, and findShapeIndex.js, into my Captivate project on the first few slides. This is the code I use to load the files - function addScript(src){ var s = document.createElement ('script'); s.setAttribute('src', src); document.body.appendChild(s); } addScript('https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js'); (I did this on a separate slide for each file to load, loading MorphSVGPlugin.min.js first, then TweenMax.min.js, then My.js, then findShapeIndex.js). Then, on the 5th slide of my Captivate project I added two SVG icons that I made in Adobe Illustrator. In Captivate I named them 'back' and 'next'. In my external 'My.js' file I gave them variables and created a function to tween them. I call the function on the 'on enter' action of the 5th slide of my Captivate project where the SVG icons are - var next = window.cpAPIInterface.getVariableValue("next"); var back = window.cpAPIInterface.getVariableValue("back"); MorphSVGPlugin.convertToPath("#nextc"); MorphSVGPlugin.convertToPath("#backc"); function myMorph(){ TweenMax.to("#nextc", 1, {morphSVG:"#backc"}); } I used the identifier "#nextc" and "#backc" because when I inspect the published html file, their div id's are nextc and backc. When I try it this way, I get this error: WARNING: cannot morph a <DIV> SVG element. Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing. So then I have also tried to just use their variable names I gave them - MorphSVGPlugin.convertToPath(next); MorphSVGPlugin.convertToPath(back); function myMorph(){ TweenMax.to(next, 1, {morphSVG:back}); } but with this method I get an error that it 'Cannot tween a null target' I've added alerts to the beginning of each of the js files (besides from findShapeIndex) so I know they are all loading. Needless to say, I'm pretty confused and not sure what to try at this point. I wasn't sure if this post was better suited for the GSAP forums or the Captivate forums. Any help or advice would be very much appreciated! Thanks.

I'm messing around with morphSVG in Code Pen and I'm getting some strange morphs on this after the label "C to D". The first two morphs work really well - and I'm using exactly the same process for the third but the polygons are flipping over instead of morphing in the usual way. I'm not sure whats going on.

Hey guys Sorry for the very basic question, but i'm running an animation linked in the codepen (very simple state at the moment) and there's 2 parts that i'd like to loop while other animations in the timeline play, to be stopped at a later point. For example, if I added .to("#anim-loadingdot", 1, {repeat:-1, yoyo:true, bezier:{values:MorphSVGPlugin.pathDataToBezier("#anim-loadingpath", {align:"#anim-loadingdot"}), type:"cubic"},ease:Linear.easeNone}) the timeline would wait infinitely for it to finish before continuing. Is it possible to set this to run "infinitely" at a certain point, and then come back to stop it later? Thanks in advance and sorry for the basic question.

I've recently found myself wanting to animate SVGs for a few different projects and realized I realized that I've not done it before. In looking to find a good method of handling different sorts of animations, I found GreenSock and have gone over the docs and some of the learning materials, but I seem to be misunderstanding some basic concept... I saw the face example on the MorphSVG plugin and decided to do my own take on it... I've gotten some of it working, but I'd appreciate it if someone could take a look at my CodePen and tell me what I'm doing wrong when trying to animate between a Smile, Neutral, and Frown face. Thanks

Hi, I want to get access to intermediate tween values when using morphSVG without actually animating anything. Is this possible? I tried something like this but it doesn't work.

I’ve seen a few questions recently about getting better morphs so I thought I’d share a little tip that may help my fellow AI users. Whether you’ve created your own vectors or downloaded some stock artwork, the scissors tool is a quick way to get better morphs. You can also completely control the start point of your DrawSVG animations. I have an example using a couple heart shapes. This is just an icon from a collection I downloaded. The designer has the first point in the upper right curve of the heart. That’s probably not the best start point for any type of animations, so that needs to be fixed. Step 1 – Cut that path. Grab your scissors tool (it’s in the fly-out menu under the eraser). Line that up with the anchor point at the bottom point of the heart and cut. You’ll now have two anchors at that location. Step 2 – Select the points at the cut location and then join them together. It’s under the Object --> Path –-> Join (or Ctrl+J shortcut.) That is now the new start point of the path. You can now export the SVG. Here’s the difference with DrawSVG. You can see on heart one (as originally designed) the path starts drawing from an unnatural position. In heart two I’ve made that cut at the bottom and the animation feels better and animates the way a heart would naturally be drawn. Here’s the difference with MorphSVG Again, the first heart and star are left as the original designer created them. You can see the morph looks pretty good, but it has a bit of a twist to it. I used the scissors on both heart two and star two with a cut right at the center of the bottom. This morph looks much more natural. The bottom point of the heart splits into the bottom two points of the star and the twisting motion is now gone. There's your hot tip for Valentine's Day. Happy tweening and morphing everyone.

Hi, I tried create similar animation in right top which you can see in the picture from this website ( https://waaark.com/ ). In CodePen is my animation. Their animation start from bottom to top but my from all sides to middle. Thank you for your advice.

Hi, I have a path with a circle going along it using MorphSVG with Bezier. When you press 'play', the circle follows the path to the end as expected. However, I want the circle to stop at the top of the curved line, so like 70% along the path. Is this possible? https://codepen.io/Carrly/pen/vpwBEW

Hello Beings of Supreme Tech Wizardry, I've got an issue with some jumping "text" in an animation. The text is actually a union of SVG paths. The lower text path contains the basic path for the text letters and the upper text path contains the cutouts for the R's. However, there a strange jump in text near the end of the sequence. The flag background animates perfectly. Any ideas to what could be causing this and a fix? Update: I've found a method that works which repeats a single SVG Morph with yoyo though I'd really like to specify more states to fine tune the animation. Ex: var hurryTextLowerAnimation = new TimelineMax({ repeat: -1, yoyo: true }); hurryTextLowerAnimation.to("#text-lower-1", 0.5, { ease: SteppedEase.config(3), morphSVG: "#text-lower-3" }); Thanks! https://codepen.io/rayjon/full/JMagzV

Hello, I just started working with morphSVG with great results. The last version of a series of animations I am doing has a problem however. Between two steps in the animation, the whole svg is inversing inside out. I tried to change the SVG points around a little without leaving the design too much but to no avail. Is there an easy fix, or something I can take care of to avoid this?

I am trying to create a minimap for a little game. First i started creating a full map in SVG, and then animated the player icon alongside the path. But is it possible to reverse the behaviour, so that the player icon stays, and the path itself, is animating, moving and rotating anchored to the player icon? Just like the image below. Any help is highly appreciated. current code: motionPath = MorphSVGPlugin.pathDataToBezier('#motion-path', {align:'#player-dot'}); TweenLite.set('#player-dot', {xPercent:-50, yPercent:-50}); tl.to('#player-dot', 2, { bezier:{values:motionPath, type:'cubic'}, ease: Power0.easeNone });

How should I morph many shapes/paths into a new one, I want to play with about 5 or 10 times more than in the example.

Hey I'm wondering if anyone had some experience with this kind of thing? My approach was to use MorphSVG - but I'm not sure that's the best way. If you guys have any thoughts how to handle this I'll be very eager to learn - just point me the way, please. Cheers !

Hello, I'm quite new to GSAP and still learning the ropes. I am trying to create a specific animation that has proven difficult and was hoping someone could give me some pointers or advice on how to best tackle this. Using the MorphSVGPlugin I have placed several dots on a path and made them loop on it. What I would like to be able to do with this is when clicking a dot, to have this dot move to the bottom center of the path. In other words, the dots should loop forward or backward (based on the shortest distance) until the clicked dot is in the right location. So far I have not been able to figure out a way to make this work. Any help or advice would be much appreciated! Thanks.

Hi! New to this, well basically new to coding in general. Tried finding a similar project/post, but haven't found anything. Hopefully someone can point me in the right direction I have four SVG shapes that i want to morph step by step. So: shape 0 > shape 1 > shape 2 > shape 3 > shape 0 (and loop). I want the shapes to loop, but also want to force jump to next shape on click. If that makes sense.