Leaderboard

Hey fellow GreenSockers, I’ve seen some demos and questions lately with SVGs containing nested groups that are 10 deep and generic class names that aren’t helpful. This makes your job tougher, so I thought I’d share a few tips for better SVG exports from Adobe Illustrator. I’ve created a simple SVG with a background rectangle, some ungrouped squares, a group of circles, a group of lines and one open wavy path. Here’s the artwork with the layer panel in AI. Tip 1: IDs If you have elements that you know you’ll be targeting individually, give them an ID in AI. In this case I’ve given each of the colored squares a name. I’ve also named the wavy open path. Tip 2: Grouping If you have a group of elements that you’ll want to stagger or somehow target as a group, create a group for them. Simply select all of them and pressing Ctrl + G will make a group for you. You can also create a sub-layer and add them to it or create an entirely separate layer. Do whatever works for you. Just get them grouped before export. You can see in my layers panels I have a masterGroup around everything and then nested groups around the straight lines and circles. The elements in those groups do not need an ID as I’ll have no need to target them individually. You can also use nested groups within nested groups. Maybe a character has a group called ‘#face’, but the eyes need to be their own group within the face group. If that’s what you need for control, go for it. Tip 3: Export Settings Choose File –-> Export –-> Export As --> then choose ‘Save as type: SVG’. The directory is unimportant as you won’t actually be saving it. Choose Export at the bottom of that panel and then we’ll get to the important settings. The next screen you’ll see will be for the SVG Options. At this point you could choose OK and the file would be saved, but I find it best to click to ‘Show Code’ instead. That will launch a text editor which will allow you to copy and paste the code into your editor. Make certain the Object IDs is set to Layer Names. If not, the group names and path IDs will not come through to the SVG. The most important setting here is the Styling. If you choose: Internal CSS, you’ll get a bunch of generic class names. The IDs will still come through, but I don’t find generic class names helpful at all. Here’s what you get with that export. <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500"> <defs> <style> .cls-1 { fill: #333; } .cls-2 { fill: #ff0; } .cls-3 { fill: #7ac943; } .cls-4 { fill: #3fa9f5; } .cls-5 { fill: #ff931e; } .cls-6 { fill: none; stroke: #e6e6e6; stroke-miterlimit: 10; stroke-width: 4px; } </style> </defs> <g id="backgroundGroup"> <rect id="backgroundGray" class="cls-1" width="1000" height="500"/> </g> <g id="masterGroup"> <g id="nestedCircles"> <circle class="cls-2" cx="650" cy="150" r="50"/> <circle class="cls-3" cx="650" cy="350" r="50"/> <circle class="cls-4" cx="850" cy="150" r="50"/> <circle class="cls-5" cx="850" cy="350" r="50"/> </g> <rect id="greenBox" class="cls-3" x="100" y="100" width="100" height="100"/> <rect id="blueBox" class="cls-4" x="100" y="300" width="100" height="100"/> <rect id="orangeBox" class="cls-5" x="300" y="100" width="100" height="100"/> <rect id="yellowBox" class="cls-2" x="300" y="300" width="100" height="100"/> <path id="wavyPath" class="cls-6" d="M68,457c45.67-15.25,115.6-33,201-31,84.49,2,104.92,21.37,193,25,108.61,4.48,136.93-22.58,236-28,61.7-3.37,150.91,1.64,262,43"/> <g id="straightLines"> <line class="cls-6" x1="450" y1="100" x2="450" y2="400"/> <line class="cls-6" x1="500" y1="100" x2="500" y2="400"/> <line class="cls-6" x1="550" y1="100" x2="550" y2="400"/> </g> </g> </svg> For styling I prefer to set it to Presentation Attributes. Here’s what you get with that setting. <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500"> <g id="backgroundGroup"> <rect id="backgroundGray" width="1000" height="500" fill="#333"/> </g> <g id="masterGroup"> <g id="nestedCircles"> <circle cx="650" cy="150" r="50" fill="#ff0"/> <circle cx="650" cy="350" r="50" fill="#7ac943"/> <circle cx="850" cy="150" r="50" fill="#3fa9f5"/> <circle cx="850" cy="350" r="50" fill="#ff931e"/> </g> <rect id="greenBox" x="100" y="100" width="100" height="100" fill="#7ac943"/> <rect id="blueBox" x="100" y="300" width="100" height="100" fill="#3fa9f5"/> <rect id="orangeBox" x="300" y="100" width="100" height="100" fill="#ff931e"/> <rect id="yellowBox" x="300" y="300" width="100" height="100" fill="#ff0"/> <path id="wavyPath" d="M68,457c45.67-15.25,115.6-33,201-31,84.49,2,104.92,21.37,193,25,108.61,4.48,136.93-22.58,236-28,61.7-3.37,150.91,1.64,262,43" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <g id="straightLines"> <line x1="450" y1="100" x2="450" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <line x1="500" y1="100" x2="500" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <line x1="550" y1="100" x2="550" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> </g> </g> </svg> The output is much cleaner and any of those attributes can be easily controlled with CSS or GSAP. This code straight out of AI is ready to animate with no cleanup necessary. You can quickly target those group child elements for whatever you need. It’s the best of both worlds as you can get to each element for a stagger without the need for unique IDs and you can also control them as a collective. The nested circles can be targeted like this: tl.staggerFrom("#nestedCircles circle", 0.5, {attr:{r:0}}, 0.15); Or easily targeted as a group: tl.to("#nestedCircles", 1, {svgOrigin:"750 250", rotation:360}); Bottom line: Better artwork prep will make your GreenSock life easier. Proper names and grouping before you export will make your animation work go faster as you won’t have to fumble with meaningless class names and trying to group things in your code editor. That’s not to say that you can’t tweak a few names or groups – I do that all the time. But the more things you can have exported from AI correctly, the easier your coding and animation work will be. Of course, all this is just my two-cent opinion. Take from it what you will. Hopefully some of it will be helpful. Happy tweening.

You have typo, it should be TimelineMax. Also, are you just including TimelineMax? You will need TweenLite and CSSPlugin to make it work. You can include TweenMax instead that includes both CSSPlugin and TimelineMax and few other common plugins.

The thread you linked has all demos that only run on page load, most probably OP wanted it that way. If you want your clock to run like normal clock then it should track time every few milliseconds. So in your code you just need to update time inside your showTime function, all four variables datetime, h, m, s need to be updated so they will have new time. The clock hands are being positioned by using flexbox and yPercent as -50, that will center them at bottom end. Transform origin is set to '50% 100%' which is at the bottom of the div so it will rotate clockwise from bottom. The rotation value is post-fixed by '_cw' which makes sure that clock will only run clockwise.

I've seen you and other people mention that, but I couldn't figure it out. It opens up a window like a typical file save as, so I never hit the export button because it looked like it was just going to save it and then close the window. I didn't realize that pressing export button will open up another window. I've always copied and pasted, which is fine for smaller graphics. It adds some underscores and numbers to the IDs, but the markup is formatted, and usually pretty easy to cleanup by hand. But now I won't have to do that, so thanks!

I think Craig's both posts should be merged together and posted as blog.

@GreenSock I see the problem. It's the Draggable code in the GSDevTools file. It either needs to be at the top of the file, or removed completely and added as a dependency. All these import problems can be fixed in the next update with a little work. No need to wait to for v2. Replace all the commonJS and AMD declarations with ES6 imports/exports. Break up the TweenMax file. And make the members download folder a flat directory with all the files, complete with a package.json so it can be easily installed as a local folder or repo. @naaadz and @AngusSimons The easiest thing for now is to probably just edit the GSDevTools file. Find this part of the code on around line 1200... (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; if (typeof(module) !== "undefined" && module.exports) { //node require("gsap/TweenLite"); require("gsap/TimelineLite"); require("gsap/CSSPlugin"); module.exports = getGlobal(); } else if (typeof(define) === "function" && define.amd) { //AMD define(["gsap/TweenLite", "gsap/TimelineLite", "gsap/CSSPlugin"], getGlobal); } }("GSDevTools")); Add the dependencies for Draggable... (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; if (typeof(module) !== "undefined" && module.exports) { //node require("gsap/TweenLite"); require("gsap/TimelineLite"); require("gsap/CSSPlugin"); require("gsap/Draggable"); module.exports = getGlobal(); } else if (typeof(define) === "function" && define.amd) { //AMD define(["gsap/TweenLite", "gsap/TimelineLite", "gsap/CSSPlugin", "gsap/Draggable"], getGlobal); } }("GSDevTools")); And then delete everything below it. It should work after that.

Hello @harp, I do not quite understand if this is your problem regarding scaling, but I chose to make an example using .fromTo that can help you.

I have no idea what your code is targeting. Try making a demo on StackBlitz of what you're trying to do. Just add GSAP as a dependency. https://stackblitz.com/

You need to use feDisplacementMap and pass two sources to it using in and in2, which would be result of turbulence and the source graphic.

Excellent! That works. I am impressed with the quality and speediness of support on this forum. Thanks again!

I really haven't tried to do stuff without calling beginPath, but whenever I have forgotten to call it, I can't say that I've ever seen it lockup the browser. Mostly just stuff rendering incorrectly. What kind of stuff were you doing? But I think there's always a path. Like I said, the only way to end a path is to call beginPath. You of course won't see a path unless you stroke or fill it. And some commands will automatically create a new path like rect, strokeRect, and fillRect. A path is really just a collection of vectors, like an array of points, but that doesn't mean that all those vectors are connected to eachother. You could draw thousands of different shapes on the same path by using the moveTo command. If you want to know the rules that canvas uses, you should check out the specs. It explains everything. I would normally never recommend checking out a spec to my worst enemy as some might consider that torture, but I actually like going through the canvas one every couple of months. I seem to always find neat little tricks and algorithms every time I got through it. https://html.spec.whatwg.org/multipage/canvas.html cont....

Hi @Irfanm Welcome to the forum and thanks for being a Club GreenSock member. The main problem is you have multiple paths with an ID of 'step0'. I'm not sure which one you wanted to target (IDs should be unique), but here's a fork of your pen with everything working correctly. I deleted everything from your SVG that wasn't in use to simplify things a bit. You could also use a timeline instead of those tweens with delays if you like. When creating a demo, we'd ask that you please not post Club plugin code in the JS panel. You don't need any GSAP related source scripts in there. You can simply add the necessary scripts via the little gear icon in the JS panel. Here's a CodePen with all the CodePen safe Club plugins for use in your demos. Happy tweening.

Great job, Craig! Very helpful. This is pretty much my approach and find it better than most. I still find it a bit ridiculous to have to go through so many "file > export as" steps for each revision. It would be much better if there was an option to either have: a window that shows live SVG code as you make changes a single button "show svg code" maybe someday i'll have the patience to submit a request to the illustrator people

I know, right? For their SVG export and save process, Adobe has chosen the Russian nesting doll method.

Yep. A build process will create all the distributable files that will work with scripts tags, so nothing should be different on that end. I'm not suggesting this for your build process, but one thing I really like about jsDelivr is that you can load any package from npm or github. It doesn't matter if the package has no distributable files, has dependencies on external libraries, or is written is some super future version of JavaScript, it will automatically bundle, compile, and minify everything for you. I'm bringing this up because it should be pretty easy to do, and could even be automated by a CDN if you were super lazy. I have no idea what's going on there. What's weird is that the first thing I did was move the block of code where you create the exports to the very bottom of the file and it didn't work. It would seem that that should have the same effect as moving the Draggable code to the top of the file. Maybe it's using some type of abstract syntax tree (AST) to trace the code, and knows Draggable is a dependency so it needs to be parsed first. http://resources.jointjs.com/demos/javascript-ast No. ES modules are a real thing, but nobody actually uses them in the browser. ES imports/exports get converted to CommonJS and AMD declarations in the build process, so CommonJS/AMD will be the actual output. Then why do you need to use ES module? Because ES modules are treated differently, and allow for optimizations like tree-shaking. But the big thing I've noticed is that all these CLI tools that people are using for stuff like React, Vue, and Angular treat everything outside of the node_modules folder as an ES module. That's why people have been having trouble importing member plugins from other folders in their project. The "gsap/FILE" syntax seems to have fixed most of those problems, but you shouldn't have to change anything. You just need to instruct people to install from the folder or a repo instead of the hosted package on npm. Installing from a folder or repo uses what's inside of it as the source, and copies everything to the node_modules folder. It will look and function exactly like the hosted package on npm. I don't think people realize that npm can install from practically any source. You can even symlink folders. https://docs.npmjs.com/cli/link Everything is in my head at the moment, so I don't have a demo, but I have pretty good idea of how this could work.

Excellent tips as usual, Craig! Thanks for taking the time to write this up.

Your videos will be helpful to somebody. Even if you don't get any feedback, that doesn't mean it wasn't helpful to somebody.

No no, "gsap" just points to the "TweenMax" file, thus "TextPlugin" is not inside of that. Sorry. That's why I said to import it directly like "gsap/TextPlugin". Have you tried that?

Here is the part 2, I should have just maybe made it into week long series rather than trying to finish it in 2 parts. After about 45 minutes in both parts, I could only finish the basic effect. Not sure if I should make part 3. I might just switch to making smaller videos rather than something longer like this but will see how it goes. As for making videos, it gets overwhelming at times but I am enjoying it and think it will only benefit me.

I had my tesla prototype driving me around today and it was really weird running the demo on the fullscreen HUD. forget about even trying to use the codepen editor while doing this.

This is an old thread. Try importing without messing with the webpack config.