Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'morphsvg'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 109 results

  1. 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
  2. Hey guys, I just joined the club earlier today and briefly went through the documentation. I am trying to morph the shape on the left into the shape on the right. The effect I was hoping to achieve is to make the left shape(original state) look like it's starting to drip down like it's melting. I tried using leveraging the findShapeIndex() function but none of the indexes there replicated that effect. Does that mean that what I am trying to achieve is not possible or is there a different approach I can use? Any ideas would be greatly appreciated! Thanks
  3. Hi, I created this animation and tried to import it to my website. https://codepen.io/Philastan/pen/VwLRMwx Surprisingly i only got the first part of my animation working and after some fiddling I got the same result in Codepen, while there are basically the same libraries loaded. https://codepen.io/Philastan/pen/eYNLZYX After reading in the documentary I ended up trying to use tl = gsap.timeline({ paused:true }); instead of the timelineLight - but still: Same issue. It seems like Gsap gets stuck at the Morphing Part. I am happy about any kind of help! Phil
  4. 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
  5. When I try to use MotioonSVGPlugin without importing it I get this: Invalid property morphSVG set to .OrbitIndicatorProgradePath001 Missing plugin? gsap.registerPlugin() I get this readout when trying to import MorphSVGPlugin: index.js:3 Uncaught ReferenceError: MorphSVGPlugin is not defined at index.js:3 Here is how I am trying to import it as per the plugins page: //Import plugisn from GreenSock gsap.registerPlugin(MotionPathPlugin); gsap.registerPlugin(MorphSVGPlugin); I am honestly really new to coding if it was not obvious. So the codepen may not show you what you need to know. So here is what I have in my actual code to grab it with: Draggable.create($prograde,{ lockAxis: true, //allows locking to an axis type:"x", //locks to the x axis bounds: document.querySelector(".control-prograde"), //makes it so it wont drag outside of the box. dragResistance: .5, onDragEnd: function() { gsap.to(this.target, 0.25, {x: 0, y: 0});// when user lets go it sends the icon back to its start position. gsap.to(".OrbitIndicatorDefault001", 1, {morphSVG: ".OrbitIndicatorProgradePath001"}); // gsap.to(".svg_rocket", {duration: 5, motionPath: ""}); //starts the animation when the user lets go. // $DefaultOrbit.classList.add('hidden'); // $DefaultExplain.classList.add("hidden"); // $ProgradeElipse.classList.remove("hidden"); // $ProgradeExplain.classList.remove("hidden"); }, onDrag: function(){ console.log($prograde.style.transform) ; } } ); Lastly I am not sure how to get the thing to run on the codepen, I am lost and trying to figure this all out. Thanks for the help!
  6. 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
  7. 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; }
  8. 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
  9. Hi there, I've been enjoying making some animations with GreenSock today and I've run into a problem. I have a feeling that the solution is simple and that I am just missing it through sheer obliviousness. Perhaps you could point me in the right direction. I'm working with a compound path that I made in Illustrator and saved as SVG. My two paths are described using the d attribute, with one shown and the other {visibility: hidden}. I'm attempting to use the morphSVG plugin with TweenLite. I've tried: using the id name as a string "#hamburger" saving the element in a JavaScript variable and passing that in passing in the path string from the d attribute. None of these options is working for me! From the docs vs my code: TweenLite.to("#circle", 1, {morphSVG:"#hippo"}); // GSAP Docs TweenLite.to(hamburger, 1, {morphSVG: "#hamburger"}); // My Code When I try using a JavaScript variable, the console error is: invalid morphSVG tween value: [object SVGPathElement] When I use the id string, the console error is: invalid morphSVG tween value: #close When I use the path string, there's no console output. However, watching the containing div's classname, I can see that the code is being run. I thought the case might be because I was using compound paths instead of simple paths. I made a circle and star path in Illustrator and tried to use those instead. Same problem as far as I can tell. Well, if you could give it a try on the CodePen and offer a suggestion as to how I can address this I'd appreciate it. Thanks!
  10. 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.
  11. 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.
  12. 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
  13. greykrav

    Hulk smash

    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?
  14. 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.
  15. 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.
  16. 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
  17. 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?
  18. 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
  19. 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,
  20. mikel

    ImmediateRender

    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
  21. 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.
  22. 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.
  23. 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.
  24. 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!
×