Jump to content
Search Community

How to create a line in HTML?

David Spector test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

47 minutes ago, David Spector said:

I also know that GSAP has no primitive shape-drawing functions, and cannot use a canvas element.

 

GSAP is a Javascript library for tweening object properties having numerical values, and Canvas is certainly part of that group. Any Javascript you want to use to create such objects is suitable.

 

There are ways to create lines, arcs, circles, squares etc. with HTML and CSS ... but that's rarely good in practice.

 

See the Pen ZwrWWY by sgorneau (@sgorneau) on CodePen

 

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

If you're looking to present shapes on the screen, you can have a look at the CSS clip-path property (no IE support and I'm pretty sure no Edge support, however)

 

 

See the Pen aXqBrV by sgorneau (@sgorneau) on CodePen

 

Also, you're very limited on styling here since all the styling is applied to the element box, not the clip. So thing like borders and drop shadows will show through the clip, they are not applied to the clip path itself.

  • Like 2
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

1 minute ago, David Spector said:

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?

 

For animations of illustration based compositions, that's exactly what I would do. I would never imagine creating the assets with HTML and CSS. But, I think you're really missing what a single SVG is capable of. All of your animate-able assets can (and should, for the most part) be managed in a single file with each element individually addressable.

 

 

1 minute ago, David Spector said:

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?

 

I couldn't disagree with the statement any more strongly. GSAP is not ONLY for tweening vector elements. Is for tweening DOM elements, SVG elements, Canvas properties, and more. And does exactly that. It is not an asset creation tool.

  • Like 3
Link to comment
Share on other sites

12 minutes ago, Shaun Gorneau said:

 

19 minutes ago, David Spector said:

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?

 

I couldn't disagree with the statement any more strongly. GSAP is not ONLY for tweening vector elements. Is for tweening DOM elements, SVG elements, Canvas properties, and more. And does exactly that. It is not an asset creation tool.

 

Yeah, that's exactly how I feel. Just because GSAP animates pretty much anything JavaScript can touch doesn't mean we need to be experts on doling out advice about everything under the sun related to what might be animated. That's like expecting tire company who makes amazing tires to know everything there is to know about the inner workings of all brands of engines, mufflers, the electronics of all the cars that may use the tires, etc. It's just not realistic - we have limited resources and we focus our energy on creating the best animation platform we can. 

 

That being said, we're happy to help with any GSAP-specific questions you may have :)

  • Like 3
Link to comment
Share on other sites

1 hour ago, GreenSock said:

is there a reason you're trying to avoid SVG?

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?

 

1 hour ago, GreenSock said:

And you can create SVG elements dynamically if you want.

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"?

 

1 hour ago, GreenSock said:

SVG is much better supported than CSS shapes.

I don't understand. Both technologies are supported by W3c, the standards group. No?

 

1 hour ago, Shaun Gorneau said:

I couldn't disagree with the statement any more strongly. GSAP is not ONLY for tweening vector elements. Is for tweening DOM elements, SVG elements, Canvas properties, and more. And does exactly that. It is not an asset creation tool.

I'm surprised. How is a beginner to learn, if the drawing objects remain a mystery?

 

48 minutes ago, GreenSock said:

Yeah, that's exactly how I feel. Just because GSAP animates pretty much anything JavaScript can touch doesn't mean we need to be experts on doling out advice about everything under the sun related to what might be animated.

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?

Link to comment
Share on other sites

33 minutes ago, David Spector said:

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.

 

In fairness, I explained what could be done with CSS, but followed it up with, "There are ways to create lines, arcs, circles, squares etc. with HTML and CSS ... but that's rarely good in practice."

 

SVG is, for all intents and purposes, absolutely the answer here.

 

33 minutes ago, David Spector said:

Does this mean that GSAP will animate both bitmapped and vector canvases and SVGs?

 

GSAP at its core tweens (interpolates) Javascript property values and provides a mechanism to sequence those tweens (Timelines). The power of that it immense, however. So whatever APIs expose properties to Javascript are fair game.

 

33 minutes ago, David Spector said:

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?

 

That's a  facet of learning anything web related. Markup, CSS, Javascript, SVG, XML, asset creation, libraries, frameworks, etc. They are all distinct disciplines and one doesn't take on the responsibilities of teaching all the others. It seems like you need to take a deep dive into SVG; I think you will be quite surprised.

 

33 minutes ago, David Spector said:

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"?

 

SVG is a markup language, just like HTML and XML (amongst others). Javascript can output any markup and inject it into the DOM.

 

33 minutes ago, David Spector said:

I don't understand. Both technologies are supported by W3c, the standards group. No?

 

Jack is not suggesting that SVG is better supported than CSS ... he's stating that SVG is better than CSS *shapes* (clip-paths).

 

33 minutes ago, David Spector said:

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

 

Again, Jack wasn't suggesting that *you* were asking for everything under the sun. He was responding to your statement, "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?"

 

Asking an animation library forum and/or documentation to give "complete advice" with regard to the ins and outs of all web API's is a bit much.

 

33 minutes ago, David Spector said:

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.

 

Asking in the forums for pointers is perfectly valid. And, to date, I think this forum has been incredibly responsive to any questions in providing pointers, advice, and working examples to those in need. You will find that the forum is anything but silent. Asking the documentation to do the same is far outside of the scope.

 

33 minutes ago, David Spector said:

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?

 

These forums are exactly what it is you're looking for. SVG and canvas have been extensively covered in the forums, but it does take some searching. If you can't find, someone will often point you to the very post that dealt with it. If that doesn't exist, then a thread usually goes deep into to providing direction, if not all out answers.

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

5 minutes ago, Shaun Gorneau said:

do you have an example of what you'd like to see animated and how?

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

 

Logo1.png

Logo2.png

Link to comment
Share on other sites

18 minutes ago, David Spector said:

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

 

There is no contradiction in these statements. The forum is for questions, answers, discussion, examples, direction, etc. When a question brings up a new concept, the threads can go deep and, if battle tested, can even affect changes to GSAP itself.

 

Documentation is not for tutorials; it's a user manual. If I buy a refrigerator, I expect the manual to tell me how to operate the refrigerator. I don't expect it to tell me how to modify my cabinets so it fits in the kitchen. But, I would definitely go to a home improvement forum to ask that.

 

18 minutes ago, David Spector said:

If some scattered, difficult-to-find forum entries can help beginners, why not add that information, coherently, to the tutorials or other documentation?

 

Because your idea of what is helpful is going to be very different than my idea, from Bob's idea, or Jane's idea. You may be into SVG where as someone else is into Canvas, someone else only wants to manipulate DOM elements like <h1>, <h2>, <li>. Some write their own HTML, some use frameworks that generate HTML. Are people generating this stuff client side or server side? jQuery or not jQuery? Or Zepto, or Angular, or React. The variables are too much to address these things in coherent way. The documentation is better left to detailing the API .. the forums are better left to dealing with the intricacies.

 

18 minutes ago, David Spector said:

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.

 

The help is here freely to anyone. These forums are as open and responsive as any I have ever seen ... actually second to none.

  • Like 2
Link to comment
Share on other sites

6 minutes ago, Shaun Gorneau said:

Because your idea of what is helpful is going to very different than my idea, from Bob's idea, or Jane's idea. You may be into SVG where as someone else is into Canvas, someone else only wants to manipulate DOM elements like <h1>, <h2>, <li>. Some write their own HTML, some use frameworks that generate HTML. Are people generating this stuff client side or server side? jQuery or not jQuery? Or Zepto, or Angular, or React). The variables are too much address these things in coherent way. The documentation is better left to detailing the API .. the forums are better left to dealing with the intricacies.

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.

  • Like 2
Link to comment
Share on other sites

31 minutes ago, David Spector said:

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.

 

I think you'd be surprised at how many individual spanking new to GSAP are well versed in things like React. But, that's not the point I'd like to make. :)

 

At the root of it, I hope you understand that this community wants nothing more than everyone to succeed with GSAP. And we love to celebrate users' successes. We work through problems, explain the documentation, hammer out issues in CodePen, point to articles and tools that can help users, etc. ... all right here!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...