Best JS library/framework for using with GSAP

[pier]

So a little introduction first. I've been using GSAP probably since 2006 or so when AS3 was introduced. I've done tons of interactive stuff in Flash and Adobe Air.

Of course, AS3 is pretty much dead these days, and HTML5/ES6/CSS3 is the thing now.

A few years back I used jQuery (like pretty much anyone) along GSAP for doing interactive oriented websites. Not so much data oriented web apps. This provided a very flexible coding experience, although ES6 wasn't here yet and it was prone to messy projects.

These days, React, Angular, Vue, etc, are all the rage, but those are focused to develop data driven web apps with data binding magic. But since DOM management is delegated to those libraries / frameworks, I've found that coding sophisticated interactive experiences is a pita. Such types of websites usually require micro DOM management entangled with sequenced animations, etc.

Right now I'm testing a very simple component based system with ES6 classes that combines GSAP and jQuery for DOM manipulation, and see how that goes...

So what is your approach?

What libraries do you use for GSAP heavy projects?

[OSUblake]

It really depends on the project.

 

I include jQuery and Lodash for almost every project. When it comes to animations, I dabble with SVG, but it usually doesn't perform well on mobile, so I do all the heavy animation stuff with canvas. When I need performance, I turn to Pixi.js. If I'm working with vectors/SVG, I like Paper.js.

 

I actually think Angular does a pretty good job of making animations first class citizens, but I get that it's not for everybody. If you're just starting out, I completely understand how it might seem like a PITA.

 

That said, I think coming up with your own component based system using ES6 classes is a good idea. I tend to write most of my animations pretty much as if I were writing a game, using a lot of ES6 classes.

[pier]

Thanks for your input.

I have used Pixi.js in a few projects and it's awesome. Specially for people with Flash AS3 experience. Although losing CSS and DOM can be very limiting for some cases.

To be fair I don't have that much experience with Angular, but in React showing and hiding DOM elements is done modifying component state. Then at some point React will remove the DOM element since setState is async. Since you don't really have direct control of the DOM those hand crafted sequenced animations and micro DOM management becomes very tedious.

If anything good comes out of my ES6 classes experiment I'll see if I share it.

[OSUblake]

Yeah, the API for Pixi is based on Flash, so it should be somewhat familiar. And I think EaselJS is based on Flash too, although I've never actually used it.

 

I know that favoring canvas over the DOM can be limiting in some cases, but again, it really depends on the project. If you're doing stuff like Active Theory, then not having the DOM probably won't be much of an issue.

 

And there are ways to map DOM related stuff to canvas. For example, here's an accessibility demo where you can tab through the different buttons.

http://www.goodboydigital.com/pixijs/accessibility/accessibility.html

 

I've been on the fence about investing time trying to learn React. I know it's really popular right, and there are some things I like about it, but not being in total control of the DOM worries me some. I think I'm just going to wait this fad out. I'm tired of learning new frameworks.

 

Do you have any prototypes of how you want to model your component system? I came across a GSAP timeline visualizer not too long ago, and liked the way they did components. It's not based on any library/framework, so you might be able to get some ideas from it.

https://github.com/floscr/Gsap-Timeline-UI

 

Something else that I found interesting is the entity component system pattern (ECS). Basically using components as JavaScript mixins. Here's a post that describes how it works.

http://englercj.github.io/2016/08/24/composition-ecs/