Jump to content


QUI (work in progress) - front-end UI pack for use with GSAP

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

A warm hello to all of the community!


(Apologies if the preamble's a little boring, you can always just skip to the heading below where I'll start cutting the mustard.)


I'm Alex, and I started using GSAP a few months ago, after immediately falling in love with its robustness and sheer performance. It was at that very time I started my new job, and it was time to start using GSAP in all of my front-end projects I decided. 


So, I posted about one or two things here on the forums, and was further overwhelmed by the quality of support provided from GSAP's developers, and other members of the community. 


The weekend before I started that job, I spent the whole time beginning to write a little library that'd allow me to easily make calls to GSAP with some pre-determined transitions I find myself using a lot in my projects. It was largely an exercise in using GSAP and I thought it could be helpful to me in future. 


As I went along, using it in development, I encountered bugs and realised that I needed to add many features and improve a lot of aspects of it for it to "just work". So, I kind of flew by the seat of my pants with it and bolted in new things or fixes and continued to use it in development. Since then I've been using it in 'live' releases (i.e. other people have been using the projects but thus far they're internal), and I haven't encountered any major issues. Though there is a lot of work and improvement I know I would do if I had the time. 


Anyway, it has ultimately saved me loads of time and been a pleasure to use, since I can quickly adapt the transitions I'm using, I don't need to repeat large chunks of code spuriously through my different projects, and it's designed to be very easily intelligible to people who haven't even used it before (or GSAP.) 


To quote Jack, "But in fairness to Julian, he really wasn't trying to build a tool that's as robust as GSAP - Velocity is more for simple UI animations in the DOM.", the thing I like to be able to do is harness GSAP's power and flexibility where necessary, but also make simple UI animations in my projects. Since GSAP is clearly the most performant/cross-browser animation suite available for the web, those benefits are important even in the websites I make, where I can often be using things like Skrollr.js too, and require backwards compatibility to the older, often nasty versions of IE. 


So that's the purpose of QUI really, and I hope other people find it useful :)


Without further ado


I've made it available as a project on GitHub, it can also be installed via Bower and it uses GSAP as a dependency, so if you have those tools installed and are a little familiar with the command line it can be added to your project in no time. 


I'd love it if people made pull requests and possibly even helped motivate me to think more about this project. I would say at the moment it's still very usable for most purposes, but I know that some of the transitions haven't been updated since I better learned how to implement them. 


I haven't yet written documents for the project, though I am planning to this afternoon. I'm going away tomorrow and I need to pack etcetera but I think I'll have time anyway. That'll probably make a big difference, so I'll post about that when I have done.


Seriously, there are tonnes of things I know I could do to improve this, but I figured if other people had a tinker it'd happen a lot faster. The main thing for now I suppose is it works and seems to add very little overhead to my projects, both in terms of loading times and execution.


GitHub page: https://github.com/Quasso/qui


GitHub site (it's a small demo): http://quasso.github.io/qui/


Install via bower:





bower install qui (--save-dev)
Really looking forward to hearing any feedback anyone may have. Docs soon!
  • Like 1
Link to comment
Share on other sites

Added some docs on the GitHub page now.


I haven't used GSAP yet in live commercial projects, but as soon as we do I'll be getting a Club GreenSock membership which is exciting!

Link to comment
Share on other sites

First of all, thanks for sharing this with the community! We love when people build useful stuff with GSAP and contribute to the ecosystem. Very cool. 


GSAP’s flexibility and raw power is one of its most attractive features and yet it can also be a tad intimidating for some. There are plenty of folks out there who love jQuery’s convenience methods like fadeIn(), fadeOut(), slideIn(), etc. But those are also somewhat limiting, not only in the options they give you but they can also tend to bloat file size because once you add all the convenient “effects” (which all ultimately tap into the same sort of base-level functionality), it can get kinda big. That’s why we didn’t bake them into the core. 


That’s the perfect case for an add-on library like this, and frankly we’ve been considering doing something like it ourselves but I can’t promise any delivery dates because we have several other features we’re working on that are a higher priority. That’s not to discourage you from your project at all - in fact, we're excited to see you doing it. The only thing we’d request is that you maybe consider using a different name that doesn’t imply that your library is from GreenSock, just so that there’s not too much confusion if/when we share our own. QuassoUI? QUI? :)


Oh, and I was wondering about your comment: “I encountered bugs and realised that I needed to add many features and improve a lot of aspects of it for it to 'just work’” - could you provide more details? Was something not working as expected? We certainly want to make sure GSAP is rock-solid and it “just works” across the board.


Thanks again for sharing this. Let us know if you need anything at all. 

  • Like 1
Link to comment
Share on other sites

Just want to chime in and congratulate you on your progress and thank you for posting it here.

Its clear you put a lot of thought into the product and the demo page (looks really nice).

I'm sure that there are folks who will find this very useful and I look forward to seeing how it evolves.


Right now its great proof of concept and it seems to handle some nice real-world use cases.


In addition to docs, I really think a few simple demos (perhaps on CodePen) would go a long way to getting more people to use it. 

I'm sure its on your list;)


Please keep us posted on the progress and enjoy your trip.




- ps thanks for the warm preamble. Very thoughtful.

Link to comment
Share on other sites

Hey Jack & Carl,


I appreciate the kind words! I'm hardly surprised you had a similar idea in the pipeline.


I totally agree about the raw power and flexibility, and I think you've hit the nail on the head with regards to use cases. The idea really is just to have the best of both those worlds, still with added flexibility for the presets and with minimal overhead to the project.


I must admit, it does ever so slightly dismay me from developing this project knowing it's something you guys intend to do. Largely because you're wizards with more experience than I, and you've built the bloomin' thing in the first place which will without doubt result in a better product. That said, it sounds like it could be some time until that comes to fruition. I suppose with that in mind, I'd be rather keen to either A. develop/modify this in a way that you'd see fit if/when you were going to pursue this (so as to potentially help lay the foundation for your work), or B. contribute somewhat to your project when you're working on it. If you think there's any way we could work something around that I'd be delighted, though I understand if not. So I suppose in terms of if there's anything I need, it would depend on that. If I were able to help catalyse the process, some advice on how you'd expect to go about it would be great--I'm sure I'd learn a thing or two in the process and I'm all about continuous improvement. My only concern is devoting much more time to this and it falling by the wayside once it's usurped by your own produce.


As for the name, I had wondered about that and I was going to suggest I'm more than happy to change it--so I'll gladly change it to something else.


Re: the part you quoted, I didn't mean I found any bugs with GSAP, I meant with my script :) it was more that in certain use cases things didn't quite work as expected so either a new feature was required or something needed improving to ensure it was robust.


Thanks very much Carl! That's very nice of you. CodePens are certainly something I have in mind and am keen to do. Would like to hear both your thoughts on the aforementioned. And just to note, the last thing I want to do is be a burden to you guys or make your lives more difficult--so if what I'm suggesting is just impractical or you believe I'm wasting my time doing this please just feel free to tell me how it is. I am rather busy generally and time is precious but I've enjoyed both building this and using it. I'd say total dev time for the whole enchilada is about 24 hours, so not a great deal really, considering I was a complete novice with GSAP for most of that!


Enjoying my trip a great deal thank you :)


All the best,


Link to comment
Share on other sites

Just FYI, I've changed the name of the project on GitHub (also in scripts etc, inc. bower) and I've edited the original post here to reflect that. I don't seem to be able to edit the title/tags here, but if an admin could then please change "GSUI" to "QUI". Thanks!

  • Like 1
Link to comment
Share on other sites

This kind of reminds me of ng-Fx, which is a GSAP version of Animate.css. It don't know if you know Angular, but the source code is still pretty interesting nonetheless. I love how he setup the animation factories. Maybe you can get some ideas from it. 


Demo... he needs to fix those overflow props  :unsure:





  • Like 2
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.