Search the Community

Hi everybody! I am completely new to GSAP. First of all I´d like to notice that I really have a hard time to get into this stuff. The documentation isn't that good for a beginner. I neither don't know what kind of plugins or other 3rd party java stuff is needed to use the gsap plugins, nor I really do not get it how to call up funtion to do something with gsap. So, how did I get here? I already programmed a little website for a geocache listing, but on mobile devices the site is kind of slow. Somebody told me to "do the trick" with gsap because it is much faster than jquery. My goal is to change the colors of pictures, borders and text when a checkbox is clicked. Here you can see what I mean: My example website I removed the images (actual code not in the example page) and now want to draw one corner image in 4 canvas. Here is what I got so far. <script> window.onload = function() { var canvas = document.getElementsByClassName("edge_can"); // I gave the canvas a class named "edge_can" / not on the example page! var ctx = canvas.getContext("2d"); var img = new Image(); img.src = "https://www.tissi-solutions.de/caches/matrix/edge.jpg"; ctx.drawImage(img,0,0,100,100); }; </script> Do the canvas need all one "id" or can I use a class to draw 1 picture in multiple canvas? How do I do that? Do I really need canvas for this or can I manipulate the colors by just calling a gsap funtion? Which plugins are needed to change all mentioned colors? Do I need PixiJS for the Pixi plugin? Am I on a right approach or do you think that the speed won´t improve by changing to gsap? Any suggestions are welcomed! Thanks in advance! Tissi

I am trying to reveal the black background only after the two red and blue canvases have completed the animation. But as you can see there is "leak" and the black ground is visible during the rotation. Also I'm learning to control overflow and have found this link https://stackoverflow.com/questions/8837050/allow-specific-tag-to-override-overflowhidden , but theres something I'm doing wrong . Please Help.

Hi, I'm new to GSAP and I'm trying to find a way to create an interactive map using a JPG image as the basemap and canvas and GSAP for the animation. I came across several examples on the GSAP website and a live project online that looks exactly like what I'm intending: http://rainforest.arkivert.no/#kart Can you tell me how is this done, or if there are any documentation/tutorial/workshop materials that I can go through. Please advice. Thanks in advance, Hagop

Hi all, I'm trying to recreate the effect I created below, but in canvas for performance reasons. Problem is My function loops over all the colors and instead of creating all independent shapes on the canvas with their own timing, it overwrites the arc on the canvas. I relatively new to canvas so, sorry if it's obvious. Thanks for the help!

Hi guys, I love using AnimateCC in conjunction with Greensock but the only thing that has always been sort of a headache has been how to animate alpha gradient masks. After some trial and errors creating and animating the mask, here is the file I wanted to share with the community, hopefully it will benefit somebody. One important piece of information that the Adobe Support team shared as well was:"Please avoid adding scripts within the mask and maskee symbols or multiple level of nesting within them because they need to be cached as bitmap for masking to work." AlphaGradientMask_radial.fla.zip

Note: when you open the Codepen scroll down to the bottom Hello there! I'm a JS/HTML5 newbie trying to animate an IRC chat using HTML5/JS in Animate CC. My goal is to dynamically create rounded rectangles with text from the chat and load them onto the canvas from the bottom. New messages would pop up from the bottom of the list and push the other messages upwards. Currently, I have the WebSocket set up and listening to messages. When it detects a message it sends it to the queue where it checks if any animation is currently playing, then if not it generates a rounded rectangle and the message text and animates it coming up from the bottom of the screen. My problem now is, if I send another message, another instance of this rounded rectangle is created and animates on top of the old one. I tried instead pushing each object pair (the text and the rectangle) into an array and then accessing it from there, which works, however, I'm having a little trouble optimising it (I attached a codepen to demonstrate the effect I'm going for and the bloated spaghetti code) (and I don't know if this is the best way to do things). The messages would also need to fade out to the side after a certain amount of time, which would mean new messages need to start lower down again. So, I'm thinking maybe each message has some kind of timer that animates it being removed and removes it from the array so that newer messages can overwrite them? I'm not sure. Does anyone have any suggestions for how I could approach this? Any help would be greatly appreciated, thank you! EDIT: This was my attempt at iterating: (the main attached one is what I'm trying to achieve without manually specifying the Y position, as the height of boxes will be dependent on the size of the message).

Hi everyone, I recently made an animation which recently had quite good feedback from the codepen community (https://codepen.io/alaricweb/pen/vWxPyp ). I too feel like there is something very cool in this animation but the perf are really bad on mobile. I don't blame GSAP for that it's pretty amazing already to be able to have such result with that few lines ! But now i want to be able to use this kind of animation in a real website but with that impact on perf it's not imaginable. I don't think i can improve the perf significantly with SVG only, if i animate less stroke, the result won't be as cool. So i'm currently looking to an alternative to have the same animation but with improved perfs ! After some research i'm starting to think that animating inside a canvas is my best option. I feel like PixiJS could be a good option with some tricks, maybe threeJS too. I saw @OSUblake pen in which we can see that he is using GSAP morphing inside the canvas and the perf are just incredible compared to mine. You can see for yourself here. So if any of you know if it's possible to have my animation inside a canvas and with what method i could try to make it better i'd be thankful for some guidelines. Alaric

Hi guys, I want to know if its possible to achieve animation like this with morphSVG? (see the link below) https://giphy.com/gifs/3o6fJ1O72KpIh4YRLa. Im trying to wrap my head around how to achieve this and I liked to know how you guys would approach an effect like this.

Hello, first-time poster here! I'm an HTML5/Animate CC newbie (and not really a dev in general, just doing this for fun and learning) and I was wondering if someone could tell me what I'm doing wrong here. I would like to be able to use GSAP to animate a vector file I'd add to the stage and would need to be able to make it animate when I call a function, however when I try to do this I keep getting cannot tween a null object, but if it's not wrapped in a function the animation plays fine. I created a new HTML5 canvas to see if I had the same problem, and I did: 1. Added a symbol to a blank HTML5 canvas, made it a MovieClip and drew a circle. I called the instance mcThing 2. In the Timeline, I selected the first frame and went into Actions 3. I wrote: function playAnimation() { TweenMax.to(this.mcThing, 3, {y:500}); } playAnimation(); 4. When testing in Chrome, I get cannot tween a null object. If I reference it as mcThing (omitting the this. I instead get mcThing is not defined. 5. If I then remove the function and just have this: TweenMax.to(this.mcThing, 3, {y:500}); It plays fine, but now I can't call it when I need to. Some context: Essentially what I currently have is a WebSocket listening for messages. When it receives a message, it's added to the queue. I am trying to get it to play an animation and insert the text from that message. The text itself should be okay: I used CreateJS to instantiate a text in the code and TweenMax works there, the problem is animating shapes/drawings. I suppose I could instantiate all the shapes in the code itself and TweenMax would work then but I don't think this is realistic as the animation/shapes are fairly complex, so I'm trying to target the stage. The animation would play out, stop, then the message would be removed from the queue and the next one would play (same animation, different text). I think this is a scope issue, but I'm not sure what I need to change. I have used GSAP in AS3 recently and it was working completely fine within functions. Any help would be much appreciated!

Hello there, I've recently been exploring ways to create awesome animations and i've come across the 'canvas' element. Now i've been looking at some articles which explain which frameworks or libraries exist out there to assist in creating animations on canvas. But it's 2017 now - Almost 2018, what is the best framework I can use for the broader use of Canvas? I'd like to create some cool parallax backgrounds, or multilayer which move on scroll, for now anyway. As always, any help greatly appreciated

I'm currently using GSAP TimelineMax, TweenMax etc.. in Adobe Animate cc 2017.5 (canvas) and its work well but, I need to apply GSAP TextPlugin to my Animate cc (canvas) project. I'm try to do this adding dynamic text field but its not working and following error appear in console " TypeError: b.nodeName is undefined ". Thanks.

Hello. function moveCard(card, userIndex, winner, image) { if(!card) return; _injectCircularServices(); var game = BCStage.getGame(); _clearCardColorTimeouts(card.id); _disableMyCards(true); self.childCount = self.childCount % 4 + 1; if(self.childCount == 4) { self.bitaIndex++; } self.bita[self.bitaIndex] = self.bita[self.bitaIndex] || game.add.group(); var bita = self.bita[self.bitaIndex]; bita.add(card); _dealPositions(userIndex, self.usersCards[userIndex].children.length, card.id, false); self.usersCards[userIndex].remove(card); _bitaWatcher(bita, BCUsers.transformSit(winner)); if(image) { card.loadTexture(image); } BCSound.card_drop.get(); var isTabInactive = document.hidden ? 1 : null; var positionX = BCConfig.dealPositions[userIndex].positionX; var positionY = BCConfig.dealPositions[userIndex].positionY; var cardAngle = (card.angle < 0? -1: 1) * BCConfig.dealPositions[userIndex].angleInTable; card.width = 106; card.height = 143; card.angle = cardAngle; if(isTabInactive) { card.scale.setTo(0.9, 0.9); card.x = positionX; card.y = positionY; if(self.childCount == 3 || winner) { _removeBita(); } return true; } else { var cardScaleTween = new TweenMax.to(card.scale, 0.45, {scale: 1, ease: Power3.easeOut}); var cardPositionTween = new TweenMax.to(card.position, 0.8, { x: positionX, y: positionY, ease: Power4.easeOut}); var cardTweenLine = new TimelineMax({paused: true}); cardTweenLine.add(cardScaleTween, 0); cardTweenLine.add(cardPositionTween, 0); if(bita.children.length > 1) { bita.forEachAlive(function(_card) { cardTweenLine.add(TweenMax.to(_card.position, 0.4, { x: _card.x + makeMinusOrPlus(randomBetween(1, 6)), y: _card.y + makeMinusOrPlus(randomBetween(1, 6)), ease: Power0.easeNone}), 0.465); }, game); cardTweenLine.add(TweenMax.to(card.position, 0.4, { x: positionX + makeMinusOrPlus(randomBetween(1, 6)), y: positionY + makeMinusOrPlus(randomBetween(1, 6)), ease: Power0.easeNone}), 0.465); } bita.add(card); cardTweenLine.play(); } if(self.childCount == 3 || winner) { setTimeout(_removeBita, 950); } } This code is tween a card. but if you fast clicking on the card (the object that start tween) sometimes animation "breaks" This function called only one time (called on socket response which is once a time)

I am trying to improve my CSS animation skills by recreating concepts I find on dribble but this one is giving me a hard time: https://cdn.dribbble.com/users/73241/screenshots/3543071/attachments/787158/att_split_00.gif I am unable to figure out how to recreate the sound visualizer's effect. I am able to setup a normal sound visualizer with bars for the frequencies but I am unsure how to approach the special effect or know if it's even possible. I have been using "shooting fountain" as a reference for it's animation but surely I have it's terminology/description wrong. Currently I am using canvas to setup a mock for it but the effects are far too complex for my experience so I am trying to find alternative methods to replicate the effect. I am looking at potentially using the GSAP's physics plugin to simulate the gravity and draw the particles themselves but I am unable to find any references to study from. I appreciate any suggestions or references that can better help me achieve similar results. Thank you for your time.

I've written in Gsap and for The Canvas element. Is there any room for GSAP in Canvas or visa versa. Are there any examples of the 2 working together? I suppose I could use multiple Canvas elements sort of like Flash MovieClips. I'm rambling I just want to know if there's any practical overlapping of the 2.

I use Adobe Animate to put my canvases together, not sure if that makes a difference to what I am asking: I have the following code on my main timeline, and it works fine there, with buttons that are also on the main timeline. function buttonOver(theBtn) { thisBtn = theBtn; TweenMax.to(thisBtn, 0.1, { ease: Sine.easeOut, scaleX: 1.05, scaleY: 1.05 }); } However I am having difficulty doing the same thing within a child mc. I have a child clip that contains four buttons that I want to all use this function, and I hope to be able to keep this code within the child clip too, so that it becomes a self contained unit which I can reuse in different projects. I have tried several variations and none have worked. It doesn't necessarily throw an error, just no animation occurs. If I put a console.log in the function it sees and responds to that, it's just ignoring the tweens. I am not sure if it is because the child clip does not know what TweenMax is, or if I am targeting the buttons incorrectly, or something else entirely!

Hi, Does anyone know of a working example or a pen using the GSAP SVGdraw plugin inside of Pixi.js canvas setup ? The goal is to draw ( animate ) svg paths of an svg redrawn inside of Canvas. ( svg inside the canvas is setup as Pixi graphics object. ) Thanks.

Hello there! First of all, thank so much for such an amazing library. I can't stop recommending it. We integrated gsap on our project in order to handle better the timings and make our code much easier and performant. I will share the temporary url with you so you can take a look: http://lab.pre.rtve.es/el-cuento/ We are getting good results on desktop, however, not so much on mobile devices. It gets all laggy sometimes and the animations start to suffer delays. How could I improve performance for mobile devices? I have been trying to set the framerate on Tweenmax ticker to 60fps, I tried force3D:true on all our translate/rotate/scale animations but still cant see a proper improvement... Do you think I made a bad choice and this is too many animations for a mobile device? We are only animating our character, doing translates, rotations, scale, and svg morphing using Snap.svg. We have a function that takes an array of svg groups (parts of our character) and goes one by one throwing snap svg morphs in order to make, for example, the whole mouth move from one type to another. Thank you very much for your help, Ricardo

Obviously I control nothing that DCM uses to insert banner ads, and yes I am bending the DCM vs DCRM rules (video equals Rich Media). The horizontal scroll is really wide, the vertical about 10 pixels. That being said does anyone see anything that jumps out at them. <style type="text/css" style="display: none !important;"> * { margin: 0; padding: 0; } body { overflow-x: hidden; } #wrapper{ position: relative; width: 300px; height:250px; z-index: 1; } #player { top:55px; left:8px; width: 280px; position: absolute; } </style> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> <script src="mealKit_300x250_youtube_noZindex_TS.js?1493820012728"></script> <script> var canvas, stage, exportRoot; function init() { // --- write your JS code here --- canvas = document.getElementById("canvas"); exportRoot = new lib.mealKit_300x250_youtube_noZindex_TS(); stage = new createjs.Stage(canvas); stage.addChild(exportRoot); stage.enableMouseOver(); createjs.Ticker.setFPS(lib.properties.fps); createjs.Ticker.addEventListener("tick", stage); } </script> <!-- write your code here --> <script type="text/javascript">var clickTag = "https://www.google.com";</script> </head> <body onload="init();" style="background-color:#D4D4D4;margin:0px;"> <div id="wrapper"> <div id="player"></div> <canvas id="canvas" width="600" height="500" style="background-color:rgba(205, 152, 101, 1.00); width:300px; height:250px" onclick="javascript:window.open(window.clickTag)"></canvas> </div> <script> // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '154', width: '250', videoId: 'XAtmYu0bbKo', playerVars: { 'autoplay': 1, 'modestbranding':1, 'controls': 1, 'fs': 0, 'rel': 0 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } var playerReady = false; // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { playerReady = true; player.mute(); } // 5. The API calls this function when the player's state changes. // The function indicates that when playing a video (state=1), // the player should play for six seconds and then stop. function onPlayerStateChange(event) { if (event.data == YT.PlayerState.ENDED) { <!-- alert('done'); --> } } </script>

Hello, I have 9 svgs takes fullpage at each, each svg contains several elements, runs about 6 seconds to complete. On computer everything works great, but on mobile it starts to slow down , even on iPad pro 12.9. (so slow). My site has 9 svgs, each takes fullpage, you can scroll to see different animation. Here is my site: https://rockmandash.github.io/InteractiveInfographic/ If you open the url on computer, it will load pc version svg and code, otherwise it will load mobile version svg and code XD. Here is a svg animation code look like: tlScene02.from($svg02topLine, 0.6, topLineParameter, 0.5) .from($svg02bottomLine, 0.6, bottomLineParameter, 0.5) .from($svg02Heading, 0.3, HeadingParameter, 0.7) .from($svg02subHeading, 0.4, subHeadingParameter, 0.8) .from($svg02Bg, 0.4, { y: -100, opacity: 0 }, 0.9) .from($svg02Door, 0.4, { y: -100, opacity: 0 }, 1) //---------------------------港澳 .to($svg02PeopleHongKongAndMacao, 0.7, { y: 190, opacity: 1, ease: Power1.easeIn }, 1.4) .to($svg02PeopleHongKongAndMacao, 0.7, { x: -90, ease: Power1.easeOut }, 2.1) .from($svg02BubbleHongKongAndMacao, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 2.8) .from($svg02LineHongKongAndMacao, 0.1, { y: 3, opacity: 0 }, 2.9) .from($svg02TextHongKongAndMacao, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3) .from($svg02FlagHongKong, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.1) .from($svg02FlagMacao, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.2) .call(animateNumberIncreasing, [$svg02NumberHongKongAndMacao, 14.5, 1, 'percent']) //14.5 % .from($svg02NumberHongKongAndMacao, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3.5) //---------------------------中國 .to($svg02PeopleChina, 0.7, { y: 70, opacity: 1, ease: Power1.easeIn }, 1.9) .to($svg02PeopleChina, 0.7, { x: -140, ease: Power1.easeOut }, 2.6) .from($svg02BubbleChina, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.3) .from($svg02LineChina, 0.1, { y: 3, opacity: 0 }, 3.4) .from($svg02TextChina, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3.5) .from($svg02FlagChina, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.6) .call(animateNumberIncreasing, [$svg02NumberChina, 40.1, 1, 'percent']) //40.1 % .from($svg02NumberChina, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3.9) //---------------------------日本 .to($svg02PeopleJapan, 0.7, { y: 80, opacity: 1, ease: Power1.easeIn }, 2.4) .to($svg02PeopleJapan, 0.7, { x: 130, ease: Power1.easeOut }, 3.1) .from($svg02BubbleJapan, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.8) .from($svg02LineJapan, 0.1, { y: 3, opacity: 0 }, 3.9) .from($svg02TextJapan, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 4) .from($svg02FlagJapan, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.1) .call(animateNumberIncreasing, [$svg02NumberJapan, 15.6, 1, 'percent']) //15.6 % .from($svg02NumberJapan, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 4.4) //---------------------------東南亞 .to($svg02PeopleSoutheastAsia, 0.7, { y: 200, opacity: 1, ease: Power1.easeIn }, 2.9) .to($svg02PeopleSoutheastAsia, 0.7, { x: 115, ease: Power1.easeOut }, 3.6) .from($svg02BubbleSoutheastAsia, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.3) .from($svg02LineSoutheastAsia, 0.1, { y: 3, opacity: 0 }, 4.4) .from($svg02TextSoutheastAsia, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 4.5) .from($svg02FlagSingapore, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.6) .from($svg02FlagThai, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.7) .from($svg02FlagMalaysia, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.8) .from($svg02FlagPhilippines, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.9) .from($svg02FlagVietnam, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 5) .call(animateNumberIncreasing, [$svg02NumberSoutheastAsia, 13.7, 1, 'percent']) //13.7 % .from($svg02NumberSoutheastAsia, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 5.3) .from($svg02BottomText, 0.4, BottomTextParameter, 5.2); You can see my site is almost complete, but I really don't like the low speed on mobile. All the animation done inside svg so I think I probably can not cache them as png or wrap them as div? So I was thinking moving to canvas will get better? I haven't try it yet. Please help, thank you! update: I think canvas is much more worse, so my problem stick to svg mobile performance issues.

Hi, i'm trying to get tweenmax bezier tween fit with a canvas quadraticCurve. The canvas QuadraticCurve is supposed to draw the trajectory of a tweening object. That curve datas are given by BezierPlugin.bezierThrough So far, start and end point seems to fit, but the canvas bezier curve middle point is higher than the tween bezier curve. Could please someone help me understand what i'm doing wrong?

Hi, I try to animate a lot of canvas shapes created with Easeljs and animate with timelineMax. The animation is too slow, the demo is here http://codepen.io/nicmitch/pen/jyKPqy . I think I do something wrong but I do no what. Any suggestion?

Ok my question is sort of related to this so just put it out there for reference: https://greensock.com/forums/topic/14782-exportimport-timelinestweens-to-json/ I have been using fabric.js with GSAP to create an app to make animations. I have run into a problem where i need to save animation in the db. I am saving my canvas as a JSON. Then the way i went about saving the saving the timeline is by just saving the whole timeline object. I think the saving is working (tell me if I am wrong?) but I think its the fact that the timeline doesn't see the reloaded canvas and its objects as the same. ?? If so what about the ideal solution here. Btw I am very new to GSAP and I am using for my project and love it so far. The fact that I am new I could be missing something very obvious and so far the forums have been helpful with the answers already up and now I am hoping someone can help me with my mine. Thanks in Advance. Regards, Mr P

Hi all! Super excited to share with you my new article which was just published on CSS-Tricks: https://css-tricks.com/using-gsap-animate-game-ui-canvas/ Let me know if you have any questions

Hey guys! I have something I'd like to implement which you could consider to effectively be a floor plan for a venue. I've advocated GSAP for a while now and so thought I'd explore what was available for it. I like the look of draggable a lot. Effectively I'd like some advice. I want to create an area on the screen and that can zoom/pan and allow me to add elements to a grid in the form of differently shaped tables. The size of the floor can grow (ad infinitum) depending on the positioning of tables, but there will always in practical terms be boundaries to the floor. A table may have dimensions of let's say 5x5 (as in grid squares) and I would like to be able to drag & rotate them as part of Angular 2 app, with them snapping to the grid. Draggable has a lot of the features I require. I'm wondering whether anyone thinks I could suitably achieve this solely with draggable and a bit of vanilla JS, whether using draggable alongside canvas/webGL would be more appropriate, or whether it wouldn't fit my needs at all. Any recommendations here would be greatly appreciated. I would love it if anyone knew of any examples like this too, I've searched around but not found anything too similar as yet. Many thanks, Alex

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 .