Looking for a meta library using GSAP for ready-to-use animations

[katerlouis]

Hey folks, long time no read!

 

time is getting thinner and thinner each year and while I have realized a lot of micro interactions over the years using gsap, they just take a lot of time. I'm on a discovery journey to speed up my output without losing quality and I've grown quite fond of UI- and form libraries recently (like PrimeVue or Shadcn/vue) – while not quite in the same ballpark, tailwind also sped up my workflow drastically.

 

Browsing the new website I stumbled upon "Tools -> UI" and was immediately excited to find a kind of meta-library on top of gsap that offers all sorts of animations ready to use. Unfortunately (for me) this page "only" showcases gsaps capabilities for UIs. 

 

While gsaps workflow is quick, making truly satisfying micro interactions takes a lot of fiddling around with timings and especially easings. 

 

Long story short: Is there such a thing as a bundle of ready-to-use animations like all sort of enter and leave animations (think popovers, tooltips, accordion or spoiler-section reveals, or all sorts of wiggles and pulses to communicate form states, but also eye candy like cute sparkles on click or a rainbow border or extensive button hovers playing with the text inside? 

[Rodrigo]

Hi,

 

We have different demos tackling some if not most of those behaviours, but there is not a single reference or source-of-truth (soto speak) that condenses them all. As far as I know there is no GUI that provides ready-bake code that can simplify workflows that much 🤷‍♂️

 

You'd have to search the forums in order to find those demos for sure and we can extend our helping hand as much as possible whenever you need it

 

Happy Tweening!

[katerlouis]

Thanks for the reply! Too bad though– may I ask if a "frozen pizza approach" like this has been discussed or considered internally? In an age where things get more and more streamlined, I'm wondering if you guys have reasoning against such meta library (or GSAP plugin?)

[mvaneijgen]

I'm coming from the "frozen pizza approach" where I would search the web from high to low to find a plugin which would do exactly what I was looking for, most of the time it would never completely do what I was searching for and I had to spend hours figuring out how the tool worked. Then I finally jumped the gun and started using GSAP and now I can literately build what ever I need. 

 

I also find that most of the work comes from creating the concept from what you want, then creating the animation is a breeze. 

 

I would not see a need for a plugin, the demos on the docs an in the forum are vast and I personally have my own set of snippets I use most often which I can just pick up tweak a bit and be up an running. I would suggest doing that, when you create something, make a note where you explain how it works and keep a snippet of the code at the same place, then in no time you have your own set which you can just drop in in any project?

 

This is my personal option and I have no idea what the GSAP things of this (I'm just a volunteer here). I know someone on the forum had build a GUI for GSAP maybe that is something that could help you? 

 

 

[Cassie]

Our demo collections on codepen are really the closest thing there is to an effects library. Loads of demos from the community there.

https://codepen.io/GreenSock/collections/loved

Maybe we'll have a library of effects in the future, but no plans currently. Thanks for the feedback!

[katerlouis]

@mvaneijgen I certainly feel your sentiment and have worked like this for years. In my recent experiences tho I've stumbled upon agencies that just can't afford (also for other reasons than budget) to do everything high-end and custom. Due to personal attachment I wanted to still help them out and was open for "frozen pizza approach" – and as I touched on in my initial post, I was pleasantly surprised to see the web has come a long way and the Bootstrap experience is no longer the benchmark. PrimeVue in particular is to mention here. Not only the DX is great, but the results feel robust, modern and do not give away (in my opinion) "a PrimeVue vibe", like Bootstrap does. 

 

For a lot of projects and people "out of the box" is enough. Especially in forms and other flows animation has incredible communication potential. High quality animations and micro interactions can induce trust quite effectively. 

 

Anyhow, that's just my experience– What I'm trying to say is: There certainly is a market and demand for frozen-pizza-ui-animations. How large that market is and if GSAP could make money here, I obviously can't say.

 

That reminds me: almost every time I brought GSAP to a project or team (oddly enough it was rare if someone knew GSAP already), I initially faced pushback in part due to GSAPs "custom code nature". Of course, big SVG, stage or scroll based animations almost require GSAP, but it's a tougher sell to add yet another library "just for some ui magic", especially when those animations have to be handcrafted as well.

 

Frozen pizza GSAP animations could be a door opener for those folks who both don't know what GSAP can truly do for you or have not yet had the capacity to jump into GSAP. There are countless reports in the forums saying exactly: there is an initial hurdle, which could be overcome for some by eating Frozen Pizza.

 

If the Elders are interested, I would like to pitch some ideas in that regard and love to work on a project like this with you. I have two approaches in mind that both do not necessarily be super big commitments.

 

 

[Cassie]

You can email [email protected] 💚 I'd be interested to hear your ideas.

[Ken Flores]

Following this thread, i think it could be extremely helpful! 

 

[Cassie]

Dropping some links here for people, lots of folks are making no-code/drop in solutions nowadays.

https://www.osmo.supply/

https://www.flowbase.co/booster/gsap-text-reveal

https://www.gfluo.com/