Jump to content


Built-in animations plugin powered by GSAP libraries

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

Hello everyone,


I have worked on JS-based animations with GSAP libraries for one year.

The product I am working on is that provides User 

Mostly, I use TimelineMax to create timeline animations by using top/left, opacity, scale,... properties.

I think my app will be better if I can combine Built-in animations with Timeline, then I can schedule the built animation with duration and offset in my timeline.

Built-in animations for example: bounce, slideIn, flash,... reference here: https://daneden.github.io/animate.css/


It's a big challenge to translate from CSS to GSAP based Javascript animations.

So I am looking for a plugin powered by GSAP Timeline libs.


Please tell me if you have any plugin like that.


Thanks a lot.

Link to comment
Share on other sites

We don't really have "built-in" effects, but the engine is very flexible and excels at allowing you to create your own re-usable effects.


I would strongly recommend reading this article and watching the videos if you need help with the concept of "creating functions that return animations".




The general idea is that you can build a timeline consisting of animations that are created via parameterized functions.

Below is a very basic implementation of this idea with 2 effects "bounceScale" and "spinAndThenFadeOut"


Notice how each box bounces and scales with unique parameters (scale amount, duration) and then each box spins and fades out with unique rotations and speed.


//effect function animates an element and returns the tween
function bounceScale(element, endScale, duration) {
  var tween = TweenLite.to(element, duration, {scale:endScale, ease:Bounce.easeOut});
  return tween;

//effect function animates an element and returns the timeline
function spinAndThenFadeOut(element, spinSpeed, spinAmount){
  var tl = new TimelineLite()
  tl.to(element, spinSpeed, {rotation:spinAmount})
    .to(element, 0.5, {opacity:0});
  return tl;

// build timeline using multiple effects on multiple elements with unique parameters
var tl = new TimelineMax();
 tl.add(bounceScale(box1, 3, 1))
   .add(bounceScale(box2, 0.5, 2))
   .add(bounceScale(box3, 0.2, 1))
   .add(spinAndThenFadeOut(box3, 2, 720), "+=0.5")
   .add(spinAndThenFadeOut(box2, 0.5, 180))
   .add(spinAndThenFadeOut(box1, 3, 360))




See the Pen pVQJEK?editors=0010 by GreenSock (@GreenSock) on CodePen



  • Like 4
Link to comment
Share on other sites

Also, for parameterized wiggles and bounces, be sure to check out the eases CustomWiggle and CustomBounce:



As a Club GreenSock member you have access to these powerful tools. I think you will enjoy them.

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