David Spector

How to import SVG paths?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

@David Spector,

 

To get those paths you only need to export/save-as your Inkscape file as an SVG file. The resulting file will have the SVG elements that are accessible to CSS and Javascript.

 

Example, here is an SVG I created and animated for someone in Reddit that had GIF illustating what they wanted to achieve with SVG and Javascript.

 

While this Pen is not tweening a logo or logo components, it is tweening SVG elements just as a logo would be SVG elements (polyline, polygon, ellipse, path).

 

 

It's also making use of the DrawSVG plugin to "draw" the line being graphed ... but those lines can be tweened in the ways that you are noting (x, y, autoAlpha, rotation, etc.)

 

Hope this helps.

  • Like 3

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

I'm not sure exactly how you want things to animate, but here's a demo for you:

 

 

Notes: 

  • There was a bunch of unnecessary stuff in your SVG markup that I removed. Metadata from your authoring program.
  • I changed the IDs for each letter from randomized values to N, S, and R. (more intuitive)
  • I put an ID of "logo" on the group <g> so you can animate the whole logo together. 
  • Your authoring program added the same inline styles to each path, so I removed those and put them in a single CSS rule. Greatly simplifies things. You can tweak colors, line thicknesses, etc. all in one place (CSS).

Does that help? 

  • Like 1

Share this post


Link to post
Share on other sites

Hi @David Spector,

 

With all due respect, "I don't have time to figure it all out" is going to limit any type of help this forum has to offer as doing any of this requires a willingness to put time into learning. The original question had very little to go on, so I do apologize that my example seemed too complex. The bulk of the SVG are the grid lines in that background that are not relevant to the help being given ... perhaps I should have stripped them out to make for a more clear example. The relevant part of the example is actually pretty small

 

tl
  .set( '#arrowhead', {autoAlpha: 0} )
  .fromTo('#grey-line polyline', .75, {drawSVG: '0'}, {drawSVG: '100%', ease: Power0.easeNone} )
  .fromTo('#drift-logo', .25, {x: 30, autoAlpha: 0}, {x: 0, autoAlpha: 1, ease: Power0.easeNone} , "-=.1")
  .fromTo('#purple-line polyline', 2, {drawSVG: '0'}, {drawSVG: '100%', ease: Power1.easeOut}, "startPurple" )
  .set( '#arrowhead', {autoAlpha: 1}, "-=2" )
  .to('#arrowhead', 2, {bezier:{values:arrowPath, type:"cubic", autoRotate: 45}, ease: Power1.easeOut }, "-=2" );

 

With only a few SVG elements being tweened,

 

'#arrowhead'
'#grey-line polyline'
'#drift-logo'
'#purple-line polyline'

 

I hope this is more helpful.

  • Like 3

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
14 minutes ago, David Spector said:

I need also the second step, how to animate the separate segments of each character

 

Oh, goodness. I didn't realize that's what you wanted. That's very unusual, but I guess you'd need to split each and every part into its own shape in your authoring tool. Or you could wade into some pretty complex JavaScript to pull each one out of an individual <path> that contains them all. My guess is, however, that you'll find it easiest to bust things apart in your authoring tool so that every piece is its own <path> that you can then target with GSAP. 

 

Another option is to manually do that by looking at the SVG markup and isolating the values. That would require an understanding of all the path commands (M, C, L, V, H, S, etc.). I suspect that's not a path you want to go down (get it? A "path" you want to go down? I crack myself up!)

 

In any case, it's gonna take some work on your part (or hire someone to do it for ya). 

 

Good luck!

  • Like 1

Share this post


Link to post
Share on other sites

Alright, this is way more than we typically provide here in terms of support, but I got curious and wrote a function that piggy-backs on MorphSVGPlugin's built-in features that automates splitting apart each path into individual little segments, and animated them: 

 

 

Maybe that'll help. Or not. Either way, it was a fun exercise for my brain. 

 

  • Like 3

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
7 hours ago, David Spector said:

But before I go to that trouble, have you heard of any similar tool?

 

No, sorry. I'm not even sure I understand the effect you're after but it doesn't sound easy (for any tool). 

 

We'd love to see what you come up with, so feel free to post back here once you've got it nailed down. 

  • Like 1

Share this post


Link to post
Share on other sites

One more little experiment - I made each letter explode outward from its own center (after a little "shake"): 

 

 

I know it wasn't the effect you wanted, but hey, I figured I'd post here anyway. Maybe some of the code will be useful to someone because it's all pretty automated. You could swap in any paths and make them explode like this. 🤯

 

  • Like 4

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
5 hours ago, David Spector said:

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.

 

Not strange. Animations are usually pretty bespoke, so there's not a lot of need to maintain a tool that you're only going to use once. For example, Jack just made a tool to split apart the paths in his demos for you, but he's probably never going to use it again. I also make a lot of tools that I think will be useful in the future, but it never turns out that way.

 

There is no easy button when it comes to animations. Learn everything you can about JavaScript, and then you can make your own tools. When people ask me how to become better, my response is always the same, go through all these Coding Math videos.

https://www.youtube.com/user/codingmath/videos

 

They show how to do fun stuff like physics, particle emitters, and even how to create your own tweening engine, but it's not something that you will be able to go through in a week or two... or month. It will take time.

 

5 hours ago, David Spector said:

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.

 

SVG isn't static. You can do all that drawing stuff dynamically with SVG. Canvas is faster, but SVG is much, Much, MUCH easier to work with. It also requires a lot less code because the browser manages all the complicated stuff for you.

 

With canvas, the browser does nothing for you, and I do mean NOTHING. If you want to move something on the screen, you have to erase everything, and redraw the entire updated screen from scratch. And canvas may not have elements or CSS, but guess what? You'll have to make something analogous to an element in pure JavaScript to store and access all the state and related graphical properties of whatever it is you're drawing/animating.

 

  • Like 3

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
11 hours ago, David Spector said:

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. 

 

I don't think SVG was ever envisioned to be highly animatable. At it's core, SVG is really just an image format that has some nice characteristics. You're not going to find anybody using SVG for really heavy animations, like in a video game.

 

 

11 hours ago, David Spector said:

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

 

True, most libraries will simplify the painting process, but there are times when you need to manually paint stuff, like when doing compositing operations. You typically have to draw stuff to some sort of temporary buffer, like an offscreen canvas. A good example of that with PixiJS.

https://pixijs.io/examples/#/demos/render-texture-demo.js

 

And speaking of PixiJS, it's worth checking out their filters demo.

http://pixijs.io/pixi-filters/tools/demo/

 

 

And I wasn't trying to discourage you from looking into canvas. All those coding math videos use canvas, and canvas is my preferred medium for creating animations, but there are a lot times when it shouldn't be used. For example, if you need to animate a navigation menu, you should probably be using DOM elements.

 

To learn more about canvas, it's worth it to check out all the demos and links in these threads.

https://greensock.com/forums/topic/16501-how-can-i-improve-this-gsap-particle-animation-code/

https://greensock.com/forums/topic/18873-animating-canvas-fillstyle-with-gsap/

https://greensock.com/forums/topic/15088-tweening-a-svg-object-in-canvas/

 

 

11 hours ago, David Spector said:

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.

 

I'll just add that while all that is possible, the web is limited by network speeds, so having users download 100MB worth of JavaScript, images and sound might not be the best idea. 

  • Like 3

Share this post


Link to post
Share on other sites

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.

5 hours ago, OSUblake said:

having users download 100MB worth of JavaScript, images and sound might not be the best idea. 

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

Share this post


Link to post
Share on other sites
21 minutes ago, David Spector said:

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.

 

I'm pretty sure there's something that can do whatever you're referring to. Searching for "web animation" tools isn't going to get you very far. When I hear the term web animations, I think of animating DOM elements. Nothing too fancy. In fact, I think most would probably consider CSS animations to be web animations.

 

The tools you're looking for will be related to motion design and game development. The output can usually be exported as JSON, which can be consumed by JavaScript. From there, you just need some type of runtime to parse that JSON data and convert it into an animation. You could make your own, but there is probably one that already exists.

 

I'd be willing to bet that a lot of the TV animations you're referring to are done in Adobe After Effects, which can be played using something like Lottie (bodymovin).

 

 

 

 

 

And then you have Spine, which is used for a lot skeletal animations. Check out the demos page.

http://esotericsoftware.com/spine-demos

 

 

 

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
1 minute ago, David Spector said:

 Unfortunately, doesn't seem to work for me. I just get a blinking vertical black line at the top left, on FF and Ch.

 

It's supposed to be a text editor. Type something into it. Hover over the letters. Enjoy. 😀

  • Like 1

Share this post


Link to post
Share on other sites

great conversation guys:

 

Quote

If we are talking about the animation itself, it clearly requires a dedicated streaming animation file format that currently does not exist. 

 

Everything you wanted (and more) was once available in SWF files. However, since the Flash Player was not "an open web-standard" and didn't work so well on mobile it got destroyed.

 

https://en.wikipedia.org/wiki/SWF

https://en.wikipedia.org/wiki/Adobe_Flash_Player

  • Like 1
  • Haha 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites
3 hours ago, David Spector said:

That CodePen "text editor" is fascinating, but clearly using canned animations for each letter...

 

Yep. After Effects exports frames, so everything is predefined. 

 

 

50 minutes ago, David Spector said:

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.

 

DragonBones is a free alternative, but I really don't know how it compares.

http://www.dragonbones.com/en/index.html

 

I also don't know if DragonBones can use the same runtimes as Spine. There are several different ones to choose from for Spine, like for PixiJS and Three.js.

http://esotericsoftware.com/spine-runtimes#JavaScript

 

 

50 minutes ago, David Spector said:

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.

 

Keep in mind that GSAP can animate anything, and you may need it to coordinate or animate additional stuff at runtime, like say a motion blur filter, background movement, scene transitions, etc. GSAP plays very nicely with WebGL libraries like PixiJS and Three.js. Just check out some the examples on the showcase page.

https://greensock.com/examples-showcases

 

And support for Unity is actually a commonly requested feature. Don't know if it will ever happen, but people want it.

 

 

 

  • Like 2

Share this post


Link to post
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.