What is the ideal way to build something similar to this link?

[Guest Nickzilla]

I built something similar a couple years ago using sprite sheets and GSAP. If I was going to build something similar to the link today. What would my option(s) be to achieve the best performance with cross device support (mobile and desktop)? SVG, canvas - Pixi.js? Any input would be greatly appreciated. Thanks in advance! 

 

Link: https://twitter.com/google/status/753653583178964992

[GreenSock]

Good question. There are so many choices, all of which have strengths and weaknesses. When you did the spritesheet thing, did you generate it from After Effects or Flash or something like that? Just curious. 

 

Strictly speaking, I'd venture to guess that PixiJS is going to deliver better performance overall, though it may be more tricky to debug than SVG. And of course SVG is probably easier to scale and make responsive, but perhaps PixiJS has good options for that too (I don't have much experience with it myself but I hear great things). 

 

A spritesheet approach to such a long/complex animation strikes me as...well...very kb-heavy. So many frames, you know? So to make things lighter, it might be better to do it with SVG/PixiJS and animate things with GSAP (using timelines of course, modularizing your code in functions that spit back timelines that can be nested in a parent timeline for ultimate flexibility and maintainability). 

[Guest Nickzilla]

Thanks, Jack!

 

I farmed out the sprite sheet images, so I'm not sure the software used to create. You are absolutely correct about the kb-heavy file size and I did run into major issues on Safari Mobile surrounding maximum image size and decoded pixels.

 

Small snippet gif of the original. http://www.nickmuth.com/images/Accident.gif

 

I think the SVG/PixiJS route is probably the best solution for me. I just wanted to make sure that putting a minute long SVG animation with multiple timelines on a mobile device was a terrible idea or there were better solutions.

 

I'll post snippets as I go. Thanks again, Jack.

[OSUblake]

The best way to do that is with skeletal animations, and PixiJS + Spine is probably going to be your best option. You can create spine animations with Spine or DragonBones. DragonBones is free, but Spine cost a little bit of money, depending on what version you get.

 

Here's a couple of examples.

http://pixijs.github.io/examples/#/spine/spineboy.js

http://pixijs.github.io/examples/#/spine/dragon.js

http://pixijs.github.io/examples/#/spine/goblins.js

 

It uses a sprite sheet (png, svg), but not for every frame. It's broken up into different body parts like this.

 

 

And the animations are all declared in a JSON file, which the software creates for you. The curve property is a Bezier easing curve. It's pretty straightforward, and very much as if you were to describe a bunch of tweens in a JSON file.

"right arm": {
  "rotate": [
    {
      "time": 0,
      "angle": -4.02,
      "curve": [ 0.267, 0, 0.804, 0.99 ]
    }
  ]
}

The PixiJS plugin allows you set animations like this, and you could also use a timeline to control everything.

myCharacter.state.setAnimationByName(0, "walk", true);

.