There is a hidden feature with TweenMax that you may never have noticed. All the easings included in the library are coming with the very useful getRatio() function.

If we check the docs, here is the official definition of this function:

Translates the tween's progress ratio into the corresponding ease ratio.

In other words, this function returns to you the corresponding value from a linear easing to a custom easing of your choice.

Here is an example with Power2.easeOut :

Power2.easeOut.getRatio(0) // Returns 0
Power2.easeOut.getRatio(0.33) // Returns 0.69
Power2.easeOut.getRatio(0.5) // Returns 0.87
Power2.easeOut.getRatio(1) // Returns 1

We can translate those values into a graph to have a more visual idea of this concept. Schema to illustrate the concept

Let's see how this feature can be used for an animation. On the demo below I'm drawing 50 dots on the same Y axis. For every dot, its X position is based on the ratio of the chosen easing. Try changing the easing to see how it affects the animation !

Here is the important portion of the code from the demo with some comments to explain how it work.
You may notice that the code isn't exactly the same since I have to handle some UI for the demo.

  // First we select all the spans from the container
var dots = document.querySelectorAll('.container span');
// We define the easing we want to use
var easing = Power2.easeOut;
// We define the duration wanted for the animation
var duration = 4;
// Then we create a Timeline to create a loop animation
var tl = new TimelineMax({repeat: -1, repeatDelay: 1.5});
// We make sure all the dots are hidden
tl.set(dots, {
  opacity: 0
});
// We loop through all the dots to define the timing when they should be displayed
for (var i = 0; i < dots.length; i++) {
  // We calculate the ratio based on the amount of dots
  // To make sure we have a 0 & a 1 value, we should subtract one from the amount of dots
  var ratio = i / (dots.length - 1);
  // We add a tween in our timeline to display the dots
  tl.set(dots[i], {
    opacity: 1,
    // The left position is calculated from the easing we picked
    left: easing.getRatio(ratio) * 100 + '%'
    // The moment when the dot should appear is the equal of the ratio times the duration
  }, ratio * duration);
}

This is nice but how can this be useful to me ?
I picked a few demos for your inspiration !
This feature can be applied to much more than timelines ;)

Demo 1

This demo is using the same logic as the demo above but instead of using the ratio as the X position, it is the delay for every dot that is dynamic.
This creates an effect where the dots are appearing slower at the beginning but faster in the end.

Demo 2

Blake Bowen created this awesome demo to explain how you could animate waves using GSAP.
You can find more info on this thread on the official GSAP forum.

Demo 3

On this ThreeJs demo I'm using the getRatio() function to position the vertices.




I hope you enjoyed this short post and you learned something new with GSAP ✌️
– Mamboleoo


2,756 0 36