Usual suspects Library?

[katerlouis]

I'm lazy; 

I don't want to write and fiddle out nice easings for baby tasks.

 

Does anybody know a single file, that unites the heroes of all animations, to call upon more easily?

My target is to quickly draw attention to an element and convey meaning in its animation; may it be to communicate an error, enforce to click, tap the shoulder cuz success.

 

Usually these animations get back to the default state at the end of the tween.

 

I imagine something like:

GBounce(".elem"); // dont tweak anything at all!
GShake(".elem");
GWiggle(".elem", 2); // if you want some timing!
GSpinningJesus(".elem", 3, Power3.easeInOut); // ease yourself if you don't trust the heroes.. Pff.

I hope such a library with usual suspects exists

[OSUblake]

There really isn't an existing library, but it's really easy to create. Just use functions to create your animations. I would also say that this would be a best-practice for GSAP.

 

Check out all the different animations made from one function.

See the Pen ca16dc83c8dd1d5b2f7d866184c12739 by osublake (@osublake) on CodePen

 

I'm using the new Object.assign method with a polyfill for the options, but you could use lodash's _.assign method, jQuery's $.extend method, or manually using some double pipes.

// Manually creating fallback options
function someAction(target, duration, options) {
  options = options || {};
  var config = {
    x: options.x || 200,
    ease: options.ease || Linear.easeNone
  };
  return TweenMax.to(target, duration, config);
}

Here's a thread you may find useful...

https://greensock.com/forums/topic/14369-dry-jsgsap-syntax-question-for-gsap-effect-snippets-library/

.

[Carl]

Blake is exactly right, having functions spit back animations is a great way to approach this. We've been considering adding some baked-in effects functions like this but for now I think you will find that using CustomWiggle will allow you to configure a wide range of shake and wiggle effects as illustrated here: https://greensock.com/wiggle-bounce (check out Custom Bounce) 

 

Since you are Shockingly Green you can start using this tools right now.