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...