David Spector

Thank you for the clear answer. My worries were for nothing. I simply misunderstood the tutorial. Shall I delete this posting?

This tutorial was recommended by the GSAP website, so you must have known who wrote it sometime in the past. Also, that page does not include the string "myColor". I am not talking about selectors. I said clearly that I was talking about CSS properties and I mentioned the property 'background-color', which is not a selector. Please read my postings again. Thank you. I do not know if GSAP requires 'backgroundColor' or not. But if it does, it should not. And if GSAP requires an element node for animation, there is no reason it cannot accept an 'id' value or even a classname preceded by a period (even though GSAP does not require the use of jQuery). I am only saying that GSAP should be flexible. Is that so wrong?

I guess I misunderstood the GSAP vars section of tutorial https://zellwk.com/blog/gsap. I thought it meant that we couldn't use {"background-color":"green"} in GSAP. So you can? Good. Never mind. (Can you use an id string where GSAP wants an element node?)

I believe that GSAP properties require manual translation from CSS naming format to CamelCase. Here is a function to do that transformation automatically. I suggest you add it to GSAP. // Kebab/snake-case to CamelCase function SnakeToCamelCase(Str) { return Str.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); }); } // SnakeToCamelCase

I've seen a demo somewhere that tangled a line into knots (cusps), each of which disappeared smoothly, so perhaps there is a more straightforward way to do it. I wish I could say where the demo was or how it was made, but I spend hours here and there intensely browsing for ideas and frameworks, taking few notes, sorry. I do remember being impressed by the way the cusps disappeared so smoothly (I think topologically that cusps cannot disappear like that because they have to lead to singularities). (The opinions expressed here are opinions.)

Okay, I give up. I thought that all beginners would want to know some basics of creating drawing objects, just one page of information. No beginner uses react! Not unless they have a strong desire to suffer. But I give up. I won't say another word about it. Oh, and I strongly agree that your forum is the best I have seen in a very long time.

Thank you for your generous offer of help. Attached are two files showing where I'm at. I can't give you a rough animation or storyboard because I'm not proficient in any tools to create them. Logo1 is the final scene, in which the logo is complete and part of the heading of my website. Logo2 is a different layer, in which I'm trying to create individual vectors that are identical with parts of characters, using the "onionskin" method. The animation will start with a stack of bricks or other building objects, then morph and move them in a staggered way to become pieces of the logo. It will be animated, but hopefully will look restrained and professional. I wouldn't mind creating these in SVG, but I don't know how to transition from characters into the pieces of characters that I need for the animation. In the previous CodePens that you and Jack very kindly made for me, the characters explode into individual glyphs. That doesn't look restrained to me, so I'm trying to create pieces of characters. I expect that the actual timelining (if that is a verb), key framing, and tweening should be relatively easy thanks to the great functionality of GreenSock once the proper drawing objects have been created (through some magic I haven't figured out yet).

I really don't want to belabor the points I have already made concerning minimal documentation for drawing objects, but since you don't agree with them, I would like to make one additional point. You say, "SVG and canvas have been extensively covered in the forums, but it does take some searching." And you say, " I think this forum has been incredibly responsive to any provide questions, pointers, advice, and working examples to those in need." But then you contradict your own helpfulness by claiming, "Asking the documentation to the same is far outside of the scope." If some scattered, difficult-to-find forum entries can help beginners, why not add that information, coherently, to the tutorials or other documentation? Help is help, period. Why dispense it only to those who go to the effort to find it? Why not give it freely to everyone? I don't mind a disclaimer that says that the information is partial or incomplete.

No, I was just trying to get advice about the beginning of the animation process, the assets to be tweened, which you and Jack feel you should be silent about. I don't know much about SVG other than what seems obvious when I look inside SVG files. When Shaun told me about CSS, I thought that was what you were recommending. But now, I see that you are recommending a whole list of data sources, including canvas. Does this mean that GSAP will animate both bitmapped and vector canvases and SVGs? I'm confused. Since there is no documentation on this end of it, how is a beginner supposed to learn about how to create visual objects? I can see how SVG can be created by Inkscape. But it can't be created by JavaScript, right? So what do you mean by "dynamically"? I don't understand. Both technologies are supported by W3c, the standards group. No? I'm surprised. How is a beginner to learn, if the drawing objects remain a mystery? I haven't asked about "everything under the sun related to what might be animated", now, have I? I've only asked about the drawing objects that are essential to using GSAP. Nor have I expected you to "be experts on doling out advice", only to advise beginners how to create the objects that GSAP deals with. It seems to me that GSAP is useless to a beginner without the basic information about how to create drawing objects. Furthermore, GSAP is the best library at what it does. That means that greater things are expected of its documentation than are expected of lesser libraries (many of whom actually do include drawing object creation). Specializing in one part of the animation process doesn't mean that you must maintain strict silence concerning your knowledge of how to create drawing objects. You don't have to give an exhaustive listing of techniques, but it would help beginners like me if you would say something about the subject. Just in this one thread I have learned how to create many basic objects using CSS. And that took just a few minutes for you to write. Take a few minutes to write about SVG and canvas as well, and then put all that material in the tutorials and other documentation to help us beginners get up to speed. What do you think?

So, you would recommend that I create a separate manually-constructed SVG element for each movable part of an animation? Is that what you are saying? Just because GSAP is a tweening library does not mean that you get to ignore the issue of creating the vector or bitmap elements of an animation. If you call it an animation library, you have to give complete advice, not just on the part you do (the JavaScript tweening functions). Right?

Followup question: this is fine for these particular shapes, but is there a recommended way to draw arbitrary vectors and spline curves? Can CSS do this, or would I have to use canvas and the new JavaScript canvas-drawing functions? Added: oh, you can stretch and rotate a css horizontal line using a tween with .set() or .progress(1), to make any vector, right?

Thank you! For some reason, I didn't think of css as a shape drawing tool, but clearly it is. I didn't know about the border-radius property at all! Amazing that one property can shift a shape from rectangle to ellipse. I just didn't know. DIVs are all we need to draw vector graphics. Wow! I think you answered my questions perfectly. I also think this information and examples should be at the beginning of any GSAP tutorial. It would have saved me much work trying to figure out where to start an animation!

Another beginner question... I know I can create a line of given width, length, etc., by creating an SVG file in another application, such as Inkscape, and copying it with a text editor to create an SVG element in the HTML. I also know that GSAP has no primitive shape-drawing functions, and cannot use a canvas element. 1. What is the standard way to create a GSAP-compatible line in HTML (statically) that I can then tween using GSAP, not using SVG? 2. Also, is there any way to create a DOM node of any tagname using JavaScript that will contain a line that I can then tween using GSAP? In this question, I have used "line" to mean any static shape, vector or bitmap.

I'm really intrigued by Spine (http://esotericsoftware.com) . I think what I've been looking for is letters and parts of letters inside meshes, with free-form deformation, and moved by bones. This library can generate JSON or binary for its intepreter, or GIFs or videos that will just work by themselves in Web pages. It has a price, but it's affordable and has a free trial. Yes, you are correct that different libraries support different types of animations. For the common use case of UI controls that give feedback when used, most libraries will work just fine, and GreenSock is the gold standard. But for "human-like" or "game-like" movement, Spine and other libraries like threejs.org and the Unity game development system really seem to have defined the right models. Thanks to all for this really fascinating discussion.

SVG could profitably be extended to include animation. SWF (Adobe Flash and Director), on the other hand, was highly functional but nevertheless deserves to be dead because of its persistent security holes that caused it to be updated often, sometimes every few days. And updating was not automatic, but manual and sometimes buggy itself. SWF development was quirky and difficult to learn, and cost lots of money. That CodePen "text editor" is fascinating, but clearly using canned animations for each letter... I guess I want to put some "bones" inside letters, then animate them with physics and variable constraints on stretching, with easy morphing and splitting. Then I could really make letters dance (see https://threejs.org/examples/webgl_loader_mmd_audio.html ). And I want to do it easily, with the tool doing most of the work! I'll look at some other libraries in more depth...

If only After Effects were free... Thanks for the spectacular demos. Unfortunately, doesn't seem to work for me. I just get a blinking vertical black line at the top left, on FF and Ch.

Thanks for the links to Pixi.js. What I have in mind is rarely done, but I've seen very inventive and lengthy animations of text on TV in which the text is always morphing into other text in various ways not supported by any Web animation tool I've seen. Of course, but: 1. If we are talking about a full-scale animation tool, there would be a Download step that would move the tool to the local computer. 2. If we are talking about the animation itself, it clearly requires a dedicated streaming animation file format that currently does not exist. Just as SVG dramatically compresses content as compared with JPG, a new animation format would dramatically compress and intermix image, audio, and animation operations to reduce the size to be downloaded. And if an animation broken into a sequence of separate buffers (as is done currently for audio) or in other ways (as currently done for video), then the only delay would be during the download of the first bufferful of information; the remaining downloads would be asynchronous with rendering. There would be no time limit on an animation, too, just as there is currently no time limit on video streaming (YouTube has some 10-hour-long very repetitious videos for falling asleep or for study background, and NetFlix offers a 7-hour tour of the fjords of Norway, among other long videos).

OSU, thank you for all these concepts. They reinforce some of my own current conclusions. But while I agree that the designers put a lot of functionality into SVG, they have dropped the ball on animating SVG, as there are few tools, and the best are not being developed further. And while I agree that canvas is a very basic and simple mechanism, there are already impressive WebGL and other canvas-based libraries, and more may come along. And while their data primitives may look like DOM elements, they will come with increasingly sophisticated manipulation methods. Or at least, I hope they will. With a good library, no one should ever have to keep track of painting a single frame, even when using <canvas>. Thanks especially for this interesting series of YouTube videos. Currently, I must agree that (unless one wants to spend tens of thousands of dollars on TV-commercial-grade animation tools) the best general route is to become proficient in one library. But we should not be satisfied with the current status. If it is easy for us to imagine Web animation that is much more complex than just interpolating a series of frames from one css state to another (and it is), then the challenge is there to create a tool to make our imaginations come to life on the screen, accompanied by sound effects, speech, and music.

Thank you for the cute explosion. Some things, like this, are easy to do in GreenSock. Other things (like symmetric explosions of many kinds of colorful tiny objects) are natural to do in Mo.js or other libraries. What I have in mind (and have seen on television) could be natural to do in some library, but not the ones I've read about. I might fail, but that's okay with me. Next I'm going to experiment and find out how to display a dot in SVG. Then I'll put the dot code after every path "move" that draws the letter vectors. Displaying the result, I'll find the place where the dot looks natural as the end of one curve and the start of the next. That way I can create separate SVG nodes for each "segment" of each letter. There should be a tool to do this, but since there is not, I'll try doing it manually. (I also have to figure out how to animate the transition from a solid letter to an outline letter.) Once this is done (segmenting letters into just a few lines and curves), I'll have to figure out how to hide more complex graphics (by making them skinny) behind a segment, and how to expand them out so that parts of letter seem to bulge and create geometric patterns that grow and morph. Finally, I'll reverse all the animation, so that an initial pattern of words or line drawings has interesting transformations that end up as my logo, with maybe a final playful flower transformation of the required "tm" symbol. I may have to go to a canvas-based library, so I can draw points, curves, and objects directly, not just animate css properties, which to me is less interesting. Having to predefine all displayed objects as DOM nodes doesn't seem natural to me. I wish there existed a complete animation library for SVG, but there isn't. I will have to investigate canvas-based libraries, to find one that is easy to use. If I do accomplish something (which is iffy at this point), I will post it here. The tools I really need for accomplishing easily what I have in mind probably do not exist, but should. I speculate that no one is interested in doing really hard and innovative things in an animation tool. Strange. Thanks for all your help.

Wow! That is amazing, and far more detailed than what I had imagined a 'segment' to be. I can see that long use makes a person able to string together tweens automatically. Impressive. I will leave you all alone now, and try to figure out how to do the fantasy effects that I can imagine (example: I want to expand one leg of the N into a grid pattern and then twist the grid). I may have to create a tool that, given a path element, displays it and lets the user select part of it as a "segment". Then the tool would output the HTML to generate that segment in the DOM. But before I go to that trouble, have you heard of any similar tool? I don't think Inkscape can do this, but I don't really know its capabilities. Anyway, thanks so much for getting me started! You really fracture me, and get me moving...

Jack, Your example was very helpful, but it doesn't show me how to isolate each stroke and curve of each character, so I can unfold them and play with them in animation. You have provided one id for each letter, but if you read the original question again, you will see that I want to animate each line and curve. Your example is great, but I want to do hand-tailored very detailed animation on each part of each letter, so I think I need either an array of DOM nodes or a separate DOM node for each line curve segment. There are many ways I can imagine this being done, but I'm not sure which is most natural for use in GSAP. I thank you for the first step, which was how to copy the innards of an Inkscape SVG file into my page. But I need also the second step, how to animate the separate segments of each character. I'm NOT asking you to do my work for me, but just to get me started! How do I do this kind of animation? Please give me a CodePen showing how to identify and animate just one segment.

Actually, it doesn't help, sorry. I can't figure out your code because it is not a minimal case--there is too much there that I just don't understand. I don't have time to figure it all out. Can you please use your words to describe what I should do? In short, anybody, please answer the original question. I'm stuck on this. I also notice in the HTML that you have an SVG element containing paths. My SVG paths are contained in a SVG file, with a possibly different format. Here Is my SVG file in its entirety: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.2" width="640" height="480" id="svg2985"> <defs id="defs2987" /> <metadata id="metadata2990"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g id="layer1"> <flowRoot transform="translate(47,-7)" id="flowRoot2993" xml:space="preserve" style="font-size:120px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Arial;-inkscape-font-specification:Arial"><flowRegion id="flowRegion2995"><rect width="343.34753" height="131.65958" x="130.36879" y="154.7234" id="rect2997" style="font-size:120px;font-weight:normal;-inkscape-font-specification:Arial" /></flowRegion><flowPara id="flowPara2999">NSR</flowPara></flowRoot> <path d="m 187.3,205.1 0,-42.5 5.25,0.0426 5.25,0.0426 22.5,33.54548 22.5,33.54548 0.2633,-33.58806 0.2633,-33.58806 4.9867,0 4.9867,0 0,42.5 0,42.5 -5.25,-0.0279 -5.25,-0.0278 -22.5,-33.72216 -22.5,-33.72215 -0.2633,33.75 -0.2633,33.75 -4.9867,0 -4.9867,0 0,-42.5 z" id="path3001" style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.35000002;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /> <path d="m 291.5,247.2532 c -10.13501,-3.3371 -17.38235,-10.15056 -19.93306,-18.73973 -2.30528,-7.76274 -2.24291,-7.91347 3.27477,-7.91347 4.83329,0 4.84389,0.007 6.09236,4.25 1.47947,5.02763 5.05239,9.11645 10.56593,12.09158 3.337,1.80066 5.65749,2.15842 14,2.15842 8.65969,0 10.5482,-0.3142 14.09007,-2.34426 5.13359,-2.94235 7.40993,-6.73246 7.40993,-12.33753 0,-8.26882 -3.78965,-10.8769 -23.00817,-15.8345 -15.2196,-3.92603 -22.03012,-6.99363 -25.87041,-11.65257 -3.60527,-4.37383 -5.57115,-10.98794 -4.60104,-15.48005 1.9202,-8.89152 6.8728,-14.34907 16.21402,-17.86715 8.4842,-3.19531 22.49793,-2.57273 30.52852,1.35627 6.82236,3.33787 11.26895,8.39812 13.26818,15.0993 1.70828,5.72595 1.13706,6.52082 -4.70355,6.54518 -3.36915,0.014 -3.77123,-0.29439 -4.86862,-3.73469 -1.578,-4.94703 -6.50745,-10.02987 -10.91457,-11.2542 -5.95766,-1.65508 -17.05633,-1.17346 -21.7164,0.94237 -10.28929,4.67167 -10.86558,16.73487 -1.00696,21.07822 2.29845,1.01261 9.74745,3.24394 16.55333,4.95852 14.40349,3.6286 20.55517,6.47236 25.03268,11.57196 4.08049,4.64742 5.09299,7.34127 5.09299,13.55035 0,9.271 -4.97603,16.71628 -14.5,21.69531 -4.3632,2.28104 -6.40096,2.64986 -16,2.89584 -7.13608,0.18287 -12.40506,-0.18075 -15,-1.03517 z" id="path3775" style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.35000002;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /> <path d="m 354,205.01172 0,-42.58827 25.25,0.36898 c 21.4269,0.31312 25.85357,0.63653 29.23635,2.13601 7.37083,3.26724 11.99001,9.57202 13.13542,17.92871 1.65541,12.07756 -6.52976,21.86226 -21.12177,25.24934 l -3,0.69636 2.47636,1.64857 c 7.02586,4.67729 13.80023,13.40817 25.91428,33.39858 l 2.27248,3.75 -6.33156,-0.0107 -6.33156,-0.0107 -8.48268,-13.23933 c -9.04263,-14.11326 -14.71576,-21.0149 -19.16579,-23.3161 C 386.00674,210.06925 381.78588,209.6 375.04966,209.6 l -10.04966,0 0,19 0,19 -5.5,0 -5.5,0 0,-42.58828 z m 50,-6.94574 c 6.81551,-3.96082 9.04234,-14.44675 4.41141,-20.77291 C 404.91888,172.52206 400.63796,171.6 381.97976,171.6 l -16.97976,0 0,14.59713 0,14.59714 17.75,-0.34714 c 15.65163,-0.30609 18.16376,-0.58759 21.25,-2.38115 z" id="path3777" style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.35000002;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /> </g> </svg>

I would like to animate my logo. I have used Inkscape to generate three letters in outline style, and I would like to animate not only all three letters as one object, but also I would like to animate the separate lines of each character in the logo, moving them, easing them, rotating them, etc. I'd even like to animate the legal "tm" symbol at the top right. How do I take the plain SVG file from Inkscape and generate the exact same line segments and curves contained in it (as paths) as separate DOM objects that I can animate using GSAP tween operations? Or is there some other easier way to accomplish my goal? I apologize for not having a CodePen to submit.

Thank you, Jack/GreenSock for your expert comments. So refreshing!

Thanks so much for your additional comments. If I can make a suggestion for GSAP, why not display in those 33 pixels per update an average color of the moving image, exactly like anti-aliasing does for lines and characters? One would have to experiment, but this might be similar to a motion blur, but be easy to compute. Or if a vertical line is being moved to the right, why not display two or three lines in one frame? They would be displayed at the same moment, but the eye might see them as part of the overall motion! I'm tempted to do this experiment, but I'm still learning the basics so it would be painful for me. Another suggestion is for the browser people: why not implement a variable frame rate, such that the average rate is a constant? So, in a linear translate with ease out, the frame rate could indeed be, say, 70fps (which is perhaps achievable) for the first few frames, then drops down so that at the end of the tween it is 24fps (movie rate). Then the "flicker density" of the animation could be made the same throughout the entire translation (tween). Thanks for the correction. HDTV is mostly beyond me. I like it, but the specifications are insanely complex. I'm amazed that the consumer price of a TV has come down to near where old standard color NTSC TVs were, given the incredible flexibility (mostly unused) behind the scenes. Excellent tips, thanks. In my logo animation (my actual goal here) I will keep such ideas in mind. Yes, and I'm relieved that there is no problem with GSAP. The problem of fluid linear translation of sharp edges over long distances should and probably will be looked at and fixed by the appropriate researchers. I doubt that there is any mathematics that says that it can't be possible.