QUI

Built to harness GSAP easily in front-end projects.

Front-end animation is great

When you have a lot of stuff on a web page, though, it can get clunky what with all the cumbersome JS libraries and CSS you're using. Especially if you're trying to do a lot of front-end animation.

Introducing GSAP

GSAP is the super-charged animation library of the web. The only slight problem is it generally requires some legwork to create the animation and that can quickly buffer your code and make it less intelligible. I thought it would be awesome if there were a reusable pack of common UI transitions that make it simple to harness GSAP's power in that context without requiring intimate knowledge of GSAP's extensive syntax, without the need to repeat code everywhere.

Now, introducing GSUI

The reason I wanted to have this at my disposal stems from being a front-end developer with a penchant for bringing things to life a little with subtle transitions. I'd used Velocity.js in the past, it has a lot of strengths, one of the biggest for me was the UI pack, since it contained the vast majority of typical animations I'd perform in a project and allowed me to quickly understand what was going on with my animation logic by keeping it short, simple and immediately intelligible.

But then I discovered GSAP was by quite a long-shot the best performer. I built GSUI and tested it while I was developing projects at work, to try to replicate that functionality.

The idea's to save front-end developers time, while still offering the top performance we've come to expect from GSAP.

Great for teams, especially when new members join who may not have experience with JS animation. Designed to be easy to pick up and understand.

Write less cluttered code, and benefit from a quicker overview of what's going on with your animation logic. I find it works great with things like Skrollr.js, too.