Leaderboard

All it means is that a new timeline will be created every time you trigger the click event and it will not be held in memory. So, unless you're passing in new parameters every time, there's no particular reason to do so. You can create the timeline once and only replay it on click. Having said that, there's nothing really bad or wrong by creating a " throwaway" timeline like that. Performance-wise.... Unless you are triggering thousands upon thousand of clicks or looping and creating thousands upon thousands of calculations on that one click, there's no real perceivable difference in performance.

If I understand correctly you could run a loop that tweens every box I suspect at some point the number of elements will impact performance. Hopefully this sparks some ideas. Good luck on your project

Yes, I'm responsible for that. I never finished the demo I was working on, but morphing into different shapes is what I actually designed it to do. I totally forgot all about making that, so thanks for reminding me. Now I just need to find time to finish it.

I'll follow the master's advice and suggest you'll be a lot better off by just setting your SVG up in a way that you only rotate your elements around the root SVG center using svgOrigin (read about svgOrigin here in this blog post: https://greensock.com/svg-tips).

Hi there! I am reading this thread but finding it very hard to picture what it is that you mean by " continuity" . What in Diaco's example does not fulfil your needs? Another question: When you stated that you wanted the mouse pointer should be "in sync" with the draggable knob, do you mean you want to lock the mouse pointer to the location of the draggable object? If that is what you want, you will not be able to achieve it. You cannot take over the mouse pointer. The best you can do is fake it by hiding the mouse cursor and then adding a fake cursor on top of the draggable object, locking that fake one onto the position you desire.

I doubt it's going to be easy. What I can think of is, let's say your mouse traveled 3 pixels, then compare closest points to the knob for 3 pixels and select one that is closest to the mouse. But there might be more problems to this solution, like lets say you move closer to the knob then you will need to add some conditional logic that will decide whether to move the knob or not. Blake might be able to suggest something but you will have to dive a lot deeper to pull it off. @OSUblake

Welcome to the forums, @TomerBrosh. Sorry, but I'm pretty lost in terms of exactly what you're asking here. Can you be a little more specific? I don't know what "rotate and move correctly" means in this case. Are you saying you want that thick part of the line to look like it's following the thinner line that it's sitting on? If so, that's probably easiest with DrawSVGPlugin (though you could do it as a rotation instead, but that'd require figuring out the svgOrigin or transformOrigin accordingly). As for moving things inside of the half-circle, you'd probably need to write a function that'll return randomized points inside that area and feed that into a recursive tween (one with an onComplete that calls the same function that does the same thing again). Not exactly simple, but doable. I hope that helps. Happy tweening!

@Sahil is totally right, but there may be a simpler solution. Part of the problem had to do with some limitations of <polygon> and <polyline> points, so try converting those to <path> elements instead which are much more flexible. Don't worry - MorphSVGPlugin makes it SUPER easy: MorphSVGPlugin.convertToPath("polygon, polyline"); Just run that first. Here's a fork: When working with <path> elements, MorphSVGPlugin will automatically select the shapeIndex that results in the points traveling the least distance overall (which is generally the most intuitive one). Does that help?

Concerning your first question about library overlap, look at what I wrote about ScrollMagic in my previous post. I have always claimed that ScrollMagic isn't needed, and it isn't. You can do the same exact thing by specifying the scroll position for an animation's time/duration. Nothing magical.

There is no passing of commands between GSAP and ScrollMagic. GSAP has no concept of ScrollMagic. It doesn't exist as far as GSAP is concerned. And Lottie is just a fancy flip book animation. Tell it what frame to display, and it displays that frame. Maybe it's best to take a step back, and first understand how some of this stuff works conceptually. Please watch these 3 videos. It will only take like 10 minutes, and is key to understanding how a lot animation works. Normalization - https://www.youtube.com/watch?v=hJqRcExiBk0 Linear interpolation - https://www.youtube.com/watch?v=mAi2-LTC2CA Map - https://www.youtube.com/watch?v=FxAEXHGZSPA All GSAP animations have a start and end value. It changes the value using interpolation. The norm value is time. The normalized time value is the same thing as the progress value. https://greensock.com/docs/TweenLite/progress() ScrollMagic does the same thing as GSAP, but instead of using time for the norm value, it uses the scroll position. So scroll position can also be considered a progress value. So here's the connection. ScrollMagic can change the progress of a GSAP animation. A GSAP animation can change a frame value. Lottie can be controlled by specifying a frame number. GSAP can't control the frame value of a Lottie animation directly, but you can animate a frame value on a generic object. Every time GSAP updates that object, you take the frame value, round it, and pass it into Lottie. See how it works on it's own. You shouldn't be calling .play() on your Lottie animation inside an onUpdate callback as it will constantly call it. The reason your animation isn't working like it should is because you omitted the most important part. You can't animate something if it doesn't exist. You have to wait for .json file to download and processed by the player. Look at the onDOMLoaded function in that video. That's kind of important.

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.

I have recently started working with an animator who uses After Effects and the Bodymovin plugin to create SVG animations for websites. Bodymovin exports the SVG file as a JSON file, which you then run in a div via a JavaScript command from the lottie.js, Lottie Web library. (Check out the links, or scroll down further in this post for more details.) My primary goal is to create a workflow that allows for rapid creation of custom SVG animations, and be able to control them fully with GreenSock and ScrollMagic. During my research and attempts to integrate them all I have wondered how much of these JS libraries are overlapping each other in toolkits and effectiveness. My knowledge of anything past design, UI/UX, and basic front end JavaScript starts to become limited. So I have to ask, is it possible to control the GreenSock + Lottie animation using ScrollMagic? And perhaps more importantly, should I be animating using this workflow at all? Current Progress: ------------------------------- If you're interested in seeing my initial journey to get all 3 integrated I have documented it below... (Unfortunately I don't have CodePen pro so I wasn't able to put this all together in a Pen for viewing, if it's something that becomes necessary I will go ahead and get CodePen pro and do so.) Research: Integrating TimelineMax, with Lottie Web, and Controlling w/ ScrollMagic I have recently started working with an animator who uses After Effects and the Bodymovin plugin to create SVG animations for websites. Bodymovin exports the SVG file as a JSON file, which you then run in a div via a JavaScript command from the lottie.js, Lottie Web library as you can see from the sample below. var select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); }, animationWindow = select('#animationWindow'), animData = { container: animationWindow, renderer: 'svg', loop: true, autoplay: true, path: 'PATH.JSON' }, anim; var anim = lottie.loadAnimation(animData); A Singular Example of Controlling Lottie w/ GreenSock I have been looking high and low for documented of examples of people successfully integrating with GreenSock and Scroll Magic with very limited results. I have found one excellent video on YouTube of a dev by the name Chris Gannon (who I suspect may be a member of these forums) successfully controlling a Lottie animation through TimelineMax but that is about it. My Attempts to Recreate This, and Add ScrollMagic Control Have not gone very well... I believe that the current state of my code (mostly able to get this far thanks to the work of Chris Gannon) is missing some vital information on the Lottie animation itself. How many frames does the animation have? The relation of scroll position to frame selection. Pushing that data through to TimelineMax to effectively control animation. My goal being to control the animation with a Tween, Duration Tween, or a Reversed Tween. The code below is my hack-job trying to get this all working; i'm currently dealing with an error from this code "Uncaught ReferenceError: animationControl is not defined". jQuery(function($) { //Lottie animation Window and Data wrapper var select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); }, animationWindow = select('#animationWindow'), animData = { container: animationWindow, renderer: 'svg', loop: true, autoplay: true, path: 'PATH.JSON' }, anim; //Lotie animation trigger var anim = lottie.loadAnimation(animData); anim.setSpeed(1); //TimelineMax Lottie animation control $('#animationWindow').each(function(){ var animationControl = new TimelineMax({}); animationControl.to({frame:0}, 4, { frame:anim.totalFrames-1, onUpdate:function(){ anim.goToAndStop(Math.round(this.target.frame), true) }, repeat: -1, yoyo: true, ease:Linear.easeNone }) }); //ScrollMagic Scene var controller = new ScrollMagic.Controller(); var icon_scene = new ScrollMagic.Scene({triggerElement: "#animationWindow_trigger", triggerHook: 'onEnter'}) .setTween(animationControl) .addTo(controller); }); And this is my current state of affairs. I will be updating this post as I move along, and eventually - hopefully come up with an elegant solution to this.

Thanks for the help! @Sahil and @GreenSock. convertToPath really helped a lot and that post by pointC was very usefull to me also.

Sounds very odd. Can you post a reduced test case so that I can see what's going on in your project? I can't imagine why you wouldn't be able to use the bonus plugins like that. Should work perfectly. Are you seeing an error? I wonder if Webpack's tree shaking is dumping the plugins inadvertently - if so, you could just reference them somewhere in your code, like: var plugins = [DrawSVGPlugin, MorphSVGPlugin]; //or whatever. This is just so Webpack says "oh, it's being referenced so I shouldn't dump it"

Thanks for both of your help with this, I've managed to get it working now so thank you very much! Changes I had to make are below. - Started the SVG from scratch with proper layers, classes and ID's and a LOT fewer lines of code (only about 150 now rather than 1000), this was mainly down to the article from PointC about saving SVG's from AI, which was brilliant, thanks. This itself resolved the issue with IE, animation was playing constitently smoothly, apart from the exception with the missing orange jumps, these still didn't appear. - To solve the orange jumps not showing, I followed PointC's advice and added " stroke-linejoin:round" onto those elements, fixed the issue. - One other issue I had was the animations wouldn't fire on a page reload, it would run once, then not again for some time. I discovered this was down to my browser caching plugin (W3 Total Cache). I added the animation JS to it's own file within my child theme, used wp_enqueue_script to load this file when the specific page was loaded and added the JS file to an exception list within the browser caching plugin. This stopped it being added to the browser cache, meaning it would load from the server each time and now fires consistently. Again, thank you both a lot for your help with this, I couldn't have fixed this without your help. @Carl @PointC

I've dabbed with React in the past and have had a play with create-react-app as well. It is possible to get it working. I don't remember from the top of my head (it's been over a year) but, half the headaches I had was to do with the linting of the code, not GSAP or React. It wouldn't build because of the linter. There are several threads discussing React and GSAP here, I'm sure enough of them will be with create-react-app, maybe you can dig something out from there. As for using drawSVG, if no one else throws an example you can follow here, I'll try and put something together for you once I have a moment.

Which route do you think you want to go with? Just rotating the SVGs around a common center or usnig the DrawSVG plugin? Either will probably yield some result, the difference will be how much prep work you will have to do in order to get it working.

Hi Puffywuffer, That has to do with how your path is created, and what are the start end points of the path. In following demo, if you change the shapeIndex you will see that it affects they way shapes morph. You can use the findShapeIndex utility to test which shapeIndex you want to use. Check out the following video, But it is great to get in habit of how you create your paths, so take a look at following post by @PointC where he explains how you can change your path's start point in illustrator.

Hi FatMunkey, With Draggable you can set a trigger element, which will basically let you drag the element but when you do that, your draggable target doesn't act as trigger itself anymore. In my demo, lets take a look at right handle. I am setting the right handle's trigger element as element iteself, top-right corner and bottom-right corner. Reason to do that is, so I won't have to repeat the same logic for corners. I can trigger same logic for corners using the border handlers. So when you drag top-right corner, it triggers both top border and right border. Why I am using triggers and what are they? Those are DOM objects that I am creating but not appending to any elements. The dollar sign was just something that people using jQuery use while creating variables that use jQuery object(initially I was using jQuery to create that demo but dropped it), so it has nothing to do with entire logic. I am creating those proxy elements to simplify the logic, if I use draggable on border elements directly, they will get thrown off out of their position and it will take a more complex solution to keep them in position. Does that help?

Check out the following thread that shows how you can drag along the path. You should able to draw your Path using total Length and knob's current position using that demo.

Here's a good article on hand coding SVGs. https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368 I wrote a little post about better exports from AI. You may find some of the info helpful. I also have this one about DrawSVG and MorphSVG start points. Happy tweening.

Welcome to the forums! I'm not very familiar with Bodymovin' or ScrollMagic so I may not be able to help much but I can tell you with confidence that what you're attempting is totally doable. The problem I noticed in your code is that you've got "animationControl" as a local variable tucked inside of that function you're feeding to $.each(), thus it's not available outside that function. It's a scope issue. What's confusing to me is that it looks like you've got it set up to accommodate MULTIPLE #animationWindow instances (which of course can't happen because IDs by their very nature are unique), so why do you have things inside of an $.each() at all? It doesn't even look like you're referencing the #animationWindow element at all inside that loop, so couldn't you just delete the whole $('#animationWindow').each(function(){ ... }) wrapper? Oh, and you don't need to sign up for Codepen Pro to do a codepen example. It's free to create anonymous pens. See Good luck with the project & happy tweening!

Understanding how matrices work probably isn't too important. I would focus on how and when to use them. Using an SVG Matrix. The trick is doing stuff in the correct order. matrix = svg.createSVGMatrix() .translate(X, Y) .rotate(R) .scaleNonUniform(SX, SY);

One thought that comes to mind would be using two images and reveal the cracked version with a mask or clip-path that radiates from a central point. Maybe something like this? Of course that method involves more asset prep. I don't how many images you'll have or how big they may be, but it could work if you don't have too many. The other idea would be creating some vector art for the cracked glass pattern and using DrawSVG to animate the branches. Hopefully that gives you some ideas. Happy tweening.

Brilliant work dude!!! I've been working on the solution myself but hadn't got this far... wow. Thank you so much for taking the time to help out

Here is the demo.

Hi, Just wanted to leave a link to the GSAP 2 Cheat Sheet in the forums. https://ihatetomatoes.net/greensock-cheat-sheet/ If anyone has any comments or feedback please let me know. Happy tweening! Cheers Petr @ihatetomatoes

I've shown how to use external SVG numerous times using ajax. There's nothing magical about it. It just an http request, like everything else loaded on your page. With jQuery http://plnkr.co/edit/khmnvLO3JfWRTkSuami4?p=preview And without http://plnkr.co/edit/c1cHZKzolHdz6nNEcvtZ?p=preview The other day @MindGamer brought a great idea about using SVG as JavaScript string variables. That way you don't even have to make an ajax call. Using string variables for content is very common approach in libraries like Angular. It's fast and the JavaScript file will be cached. Check this out. Where's the SVG coming from? http://codepen.io/osublake/pen/f9ad0aafc2fa585e60e4b9642ac716b3 Right here... https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/svg-string.js

Actually, JavaScript is crazy flexible (uncomfortably so sometimes), so I'm pretty sure you can do this: var a = [1,2,3,4]; var b = [0,0,0,0]; b.onUpdate = function() { console.log(a[0], a[1], a[2], a[3]); }; TweenLite.to(a, 2, ; //tween the values of a to those of b over 2 seconds, and log them to the console. Arrays are just objects whose properties are named numerically instead of using strings.