Search the Community

See the page below, I want to create an effect like this for the mobile menu of my site. https://template.dsngrid.com/exfolio/light/project-1.html When the user clicks on the open menu link (top right of page), first an SVG file comes from the bottom to the top of the page using the Morphsvg plugin, fills the page and then exits the page and then the site menu is displayed. From inspect I found out that this process is done on this page by changing the path value inside the SVG, but I am having trouble implementing it with GSAP, the demo page I was able to implement is similar to the one below but it does not look like what I wanted. https://codepen.io/amirehsan/pen/VYaLoxr Is there a way I can implement something like this page (https://template.dsngrid.com/exfolio/light/project-1.html) using GSAP?

I'm trying to use DrawSVG and MorphSVG plugins together to create an animated squiggle line that compresses as the density increases. An issue I am having is when you pull the density slider to the middle position and then back to the start position you see a small black line appear at what would be the start of the line drawing, its as if the drawSVG plugin has gone a sub-pixel to far causing it to loop round to the start. Is this a bug or is there something missing on how this is set up? Thank you in advance! ⭐

Hi, I'm working on this animation using ScrollTrigger & MorphSVG: https://codepen.io/jakievu/pen/zYQEwyY But I have trouble positioning the animation in the middle of the page (horizontally + vertically). The animation keep leaning to the left side even though I've set all the transform origin to center. This is what I'm trying to achieve: https://codepen.io/jakievu/pen/ZEZJLWV The animation stick to center as well as resize responsively. The only difference between those 2 codepen above is that I'm wrapping the <video> inside a <div> tag instead of a <foreignobject> tag because that's the only way clip-path would work on Safari. Hopefully someone can help! Thank you

Hi, I'm trying make a landing page with an animated blob in the background that morphs infinitely but transforms into specific shapes on some text blocks, in the example let's say i want to talk about security once i get to the security block the blob changes into a shield. Everything kind off works, the looping blob is working but when i get to the text block that i want the blob to transform into a shield it transforms for a few moments than goes back to the blob like it glitches, i want the shield to stay as long as block is on view and when out of the block to go back to the blob. I'm pretty sure this is something very easy to do but I started learning gsap yesterday because of a new place I started working at

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'm trying to do a seemingly simple morph but the outcome is not quite like desired. I'm morphing a square shape into a "diamond shape" made with same amount of anchor points and made with corner radius in illustrator for the rounding. The desired animation would look something like this: But as seen in the Codepen the morph between the paths looks different. Any ideas how to make a svg morph similar to the reference?

So I am using relative values yPercent:"+=80" to move my 3 bubbles based on which the user chooses to reveal or not. They work fine sometimes but after playing around with it a bit, they start to act in strange ways, am I missing something in my method? If this is not clear or something I made too complicated please let me know! thanks for the help ;)

I am trying to animate a cable with a plug using MorphSVG. Morphing both the cable and plug as one path gives distorted results, so I separated them. However, they do not animate together correctly. How can I sync these animations so that the plug stays on the end of the cable? I have two more of these types of animations that I need to build. Please see my codepen.

When I hover off (mouseleave) I want to speed up the reverse of the animation timeline. the .timeScale(2) isn't working for me.

I am try bring an SVG element to the front of the dom within the timeline. At the moment all the elements animate in the order of the html. Is there a way to bring elements to to the front? If you uncomment the the .fromTo tween in the middle of the timeline it will become clearer what my issue is. The white drawSVG path doesn't come to the front after setting the ZIndex. Thanks

So I have adjusted the origin of all the individual letters (changing shape index made no difference) and this was the best morphing result I could get. Is there anything I can adjust to make the kinks and bumps in the morph any smoother? I have reduced the amount of points in my paths as much as possible... but maybe there is possibility to adjust things in illustrator.

Hi guys, I've an issue with Safari rendering when I use MorphSvg Plugin to change SVG path of a mask. With other browser I've no problem, but with Safari Desktop (monitor over 1920x1080), and Safari Mobile, the SVG morphing animation is not fluid. I'm using the scrollPlugin, but also without that integration the result is the same. Any ideas? Thanks to everyone. safari-rendering-issue.mp4

Hello, I was wondering if is possible to change the direction in which 2 paths are being morphed. Currently, my path is being morphed from left to right, which doesn't look that great. Is it possible to modify it so that it starts morphing from the center and expand outwards? The link to my animation is https://codesandbox.io/s/confident-violet-lywmu?file=/src/Animate.js

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.

We haven't set up a codepen yet, but included is the visual design created for a web-based game to develop. We found a few examples of GSAP getting actually somewhat close to how it should work, but we find it hard to find a push in the right direction when it comes to intersections in the path below. The marker (avatar on A) should be able to move to points B and C when the player clicks one of those points. From point B, the player should be able to move to C or E From point C, the player should be able to move to B or D or E. Etcetera. Is this actually possible using GSAP with the MorphSVGPlugin and BezierPath?

Hi there , Adam here and to say I'm amazed at the capabilities of this library would be an understatement of epic proportions , fair play everyone here this is savage ?. So , My animation I want to perform is almost complete but I'm having terrible trouble with the text on the morphed into shape(my company logo) . I can see it's being morphed and i'm guessing it's a zIndex and bring to Front problem but I can't quite figure out why it won't come to the front , I've tried all normal methods which normally work but to no avail . My only guess would be that it is actually coming to the front but because i'm animating all the different shapes to the background to create the effect this is invariably doing lets say , one background then text then all other backgrounds . This is what I think is happening although I would love some one to have a look for me please

Hey guys. I am trying to make a morph shape with gsap plugin. The result I want to achieve is: THE GOAL IS: Find svg's with class "morph" and runs timeline animation only for the one's that is in the viewport. THE ISSUE I HAVE: I did some work in the codepen, but the issue is, that every time my window detects the svg class "morph" it start to animate all the shapes/timelines on the website - and not only the ones visible in the viewport. Any ideas how to adjust my codepen? Thank you in advance

Hi there! This might be more of an SVG composition question than an MorphSVGPlugin question, but hoping someone might be able to lend some tips on achieving the right effect for this: https://codepen.io/nolan330/pen/qBdZxJO In the pen, you might notice that the morph "primarily" expands the pentagon into the dodecagon, with the triangle and square sort of collapsing ("merhhhh...") into single points respectively. I'm wondering how I might be able to refine the morph, perhaps using shapeIndex or tweaking the SVG itself, so that the 3 independent shapes more "equally" contribute to the final dodecagon. (I apologize I don't have a more precise vocabulary for this!) The idea was that 3 + 4 + 5 = 12 (points), and 2 * 2 * 2 = 8 (stroke, who knew stroke grew exponentially!?), so the 3 original closed shapes might sort of compose smoothly into the final dodecagon. I think it could look pretty neat if configured correctly, but it seems like it will depend on a more clever path for the 3 independent shapes. So far, I've tried kind of a "cheat", where the shapes are just one continuous line, but I think it could still be improved: https://codepen.io/nolan330/pen/LYVNQmp I also tried changing the shapeIndex on the continuous line, but it doesn't seem to significantly impact the outcome: https://codepen.io/nolan330/pen/oNXxEyb In any case, any tips or feedback welcome! And I apologize if this is more of a SVG fundamentals question/unfit for the forum. -nolan

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

Hello everyone! I had hoped to unveil this animation to you all when it was completed and running smoothly. Thanks to the the shear volume of detailed answers on this forum and the amazing community of contributors behind it, someone who has no experience with JS , HTML, or even CSS can learn without even asking a question. You should all know how amazing your contributions to this forum are, and I hope this conveys the genuine appreciation from this lurker/beginner. I think it was Craig who said that he started learning JS by copying and pasting, well thats exactly how I learned to make this animation. It's a bit of a Frankenstein's monster, but I understand what I built. Unfortunately, I will have to interrupt my gushing to also add a question. Although my SVG animates exactly how I want, the rendering is obviously jittery. From what I can tell this is in large part due to the strain put on the browser attempting to render: ALL these filters and alpha changes 48 objects simultaneously What can I do to optimize the rendering efficiency of my animation? As far as I've read from this forum and outside sources I have a few options: Slim down and clean up my script. (However, this doesn't fix the rendering problems) Combine GSAP with another js rendering library like three.js or pixi.js (This would fix the rendering strain on the browser. But where to even begin? Also from what I gather rendering SVG paths in WebGL is more challenging, as the WebGL API is primarily built for rendering many triangles.) I understand if what I'm asking might be outside the scope of GSAP. Still a thank you is necessary for getting me to this point.

Hello all, I have an SVG that looks like this: <svg id="search" xmlns="http://www.w3.org/2000/svg" viewBox="-150 -5 76 69" height="76" width="400"> <path id="searchCircle" d="M56.5 29c0 14.64-11.86 26.5-26.5 26.5S3.5 43.64 3.5 29 15.36 2.5 30 2.5 56.5 14.36 56.5 29z" fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10" /> <path id="searchBox" fill="none" stroke="#fff" stroke-width="3.176" stroke-linecap="round" stroke-miterlimit="10" d="M3 2h54v54H3z" /> </svg> And after I SVGMorph the #searchcircle into the #searchBox shape, I would like to animate the width of the search circle, which is what I'm trying to do here. var $circle = $('#searchCircle'); var $box = $('#searchBox'); var tlMain = new TimelineMax(); tlMain.to($circle, 0.25, {morphSVG:$box}) .to($circle, 0.25, {attr:{width:300}}); I can get the morph to happen, but it seems to be ignoring the width property. I have also tried just the normal width: "300px" property as well. Not sure what I'm missing.

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?

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.

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