Jump to content


GSAP UI widgets developing anyone?

Moderator Tag

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

Since GSAP is such a great performing lib I'd like to get rid of jqueryUI 'widgets' completely. Because I don't want to reinvent the wheel I have this question: is anyone perhaps developing a collection of gsap based widgets like one can find on jqueryui.com?

Link to comment
Share on other sites



I worked a bit in a Popup/Tooltip jQuery plugin working on top of GSAP, but is far from being production ready. The main idea is to get rid of the classic popup that shows at the middle of the screen and that slides from the top (quoting Homer Simpson:"boring!!...") and give developers more flexibility, where you want the popup to start and end, use 2D or 3D animations. Also the popup styles are completely controlled by the developer, therefore why I believe it could be used as a tooltip as well, because you can control the size, location and animation of the element.


Unfortunately I started before version 1.13, which means it doesn't take advantage of xPercent and yPercent, so the code needs to be reviewed and is still on diapers so it needs a lot of testing before jumping into some sort of beta release, but in case anyone is interested in looking/improving it here's the git repository:




Diaco crafted this amazing accordion code some time ago, is worth looking at it:


See the Pen jEmpoJ by MAW (@MAW) on CodePen


Chrysto made this content slider samples:


See the Pen hiaJC by bassta (@bassta) on CodePen


See the Pen LckBh by bassta (@bassta) on CodePen


Finally this is a super simple drop-down menu that works even with IE7:


See the Pen Apvag by rhernando (@rhernando) on CodePen

  • Like 4
Link to comment
Share on other sites

Just out of curiosity, what would be your #1 pick for a widget you'd like to see running in GSAP? 

Link to comment
Share on other sites

@ Rodrigo

Thanks a lot for taking the time to write your respons and giving the links. I'll certainly will have a good look at your pop-away code.

That said, if that's mainly all there is some hard work has to be done to get a good collection. 'Boring' is the right word for almost all the jQueryUI widgets I think. 



If I take a look at the list of widgets provided by jQuery UI in order of the most used by myself priority #1 would be absolutely: menu systems (responsive, fly in, top, select, etc.)

I realize you can't name a menusystem a 'widget' but perhaps in its core? With a combination of good UI design and intelligent tweening methods the results should be far less boring then we usually see on the web.


After that the priority list could be something like:


  • button / buttongroup
  • tabs
  • dialog
  • datepicker
  • progressbar
  • slider
  • spinner
  • autocomplete
  • tooltip

A HUGE project...

Link to comment
Share on other sites

Menus can be kind of tricky. I was hoping you were going to say something easier, because within an hour of reading this, he probably would have an example ready for you.


I've seen plenty of jQuery UI type widgets made with GSAP. The problem is that they're usually one-offs, so you're not going to find them all in one place.


You should look through all of the CodePens created by these members. You'll probably find exactly what you're looking for buried somewhere in one of these collections.


  • Like 2
Link to comment
Share on other sites

Hi violacase  :)


i've read this :
Jonathan asked : Where does the name GreenSock come from?
and Jack answered :
"GreenSock" comes from trying to describe our role in the process of helping folks engage the Internet, like taking a step forward - we don't actually take the step for them , so we're not like a foot or leg ; we do, however, make the process much more warm and comfortable so we're more like a sock. Green is the color of growth and prosperity .
and , today i understand what he said , in fact GSAP isn't a UI framework like JqueryUi . that planed for a very bigger target and now i think that's a Biggest/Perfect solution for Web world visuall issues , borwser's limitation + much more ... 
we should go ahead , write codes and be sure that we can do almost everything with the GSAP + great support forum . pls ckeck the forum posts , here we have skilled and great guys like : Jack & Carl ( Administrators ) + JamieJefferson , Rodrigo , Jonathan , Chrysto , OSUblake and ... Who supports GSAP and help without any expectation ...
i think Searching in the GSAP forum , Codepen.io and ... is the least we can do as a developer / code writer , surely you'll find great results .
trust me , Concepting ideas and Writing little Projects like Ui Widgets , at first can cause you to grow faster in Code writing , Creativity and GSAP mastering .
  • Like 2
Link to comment
Share on other sites

Thanks OSUBlake, very good links. And funny and true:  

"I was hoping you were going to say something easier, because within an hour of Diaco.AW reading this, he probably would have an example ready for you."


Hey Diaco,

Nice piece of proza. I think you should work it out and write an article on the front page.


I'll try (English is not my mothers' tongue) a piece:


I once built a house, up from the ground.


At the river border 10 miles from the building site I found some good clay. It took me a couple of weeks to dig enough clay and transport it to the building site.

I managed to form pieces of clay in nice little blocks and dried them in the sun. It took me some weeks but at the end I had enough blocks to build the walls of the house.

There were some rainy days so it took some time. I also had to make me a brick oven. I had to search in the woods for lots of dry wood to get my oven heated enough to bake my bricks. It took some time and a lot of boring repetitive work but in the end I had a nice stack of bricks.

But hey, I needed some wood also to construct the floors, windows, doors and roof. I had to go to the woods again, cut some trees, etc, etc.

It took some years, but eventualy there it was: my own built unique house. It wasn't perfect, sometimes the rain came in and a floor was trying to collapse but I was rather happy and all my friends and family called me a great builder. Pitty it took me a few years, but hey! what a result!


The house isn't isolated so heating costs capitals. My wife is complaining about the kitchen. She wants a modern new one. I think working on this house isn't worth the pain and all of the tools are rusted. Better start all over.


I don't want to spend many years again building all necessary parts. You see, I'm getting older, sadder, wiser.

Someone told me nowadays you can get a complete front door in exactly the format and color you need! And finished take away windows! All I have to do is fit them in the gaps between the walls.

Wow... That cheers me up. I can't wait to get started. Pitty that my friend couldn't tell me the right addresses. I found a doormaker but he couldn't make the door in the measures I need. I found a tilemaker but he had just one color.

Now I'm spending my time with searching and examening the products they offer instead of building. It consumes all of my time. I wonder how long it will take me to get started building that new house.

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.