Jump to content


How does animation work?

Recommended Posts

Oh, hello. I opened the source code for gsap, but I never figured out how the opacity animation works. 

gsap.to("object", 1 , {opacity:0, ease:Expo.easeOut});

What was this code supposed to look like in native JavaScript?


This code will just make the object transparent, but it will not make it smooth:

document.querySelector("object").style.opacity = 0;

I assumed it might be "setInterval": however, I didn't find any lines with "clearInterval" in gsap code


Here's what I was able to do...


I couldn't figure out how to put an operator in a variable, that is:
if the current transparency value is less than the required one, there will be an operation: 
objOp = objOp + nTime;
and if it's more, then..:

objOp = objOp - nTime;

the only thing that came to my mind was to make "if" and make 2 options setInterval for each option...

I didn't understand at all how ease works... So, does it change the step?


How did you guys make gsap? It's unrealistically cool and beyond my comprehension.


p.s. considering what I wrote, it becomes fantastic for me to have this command:

gsap.to("object", 1, {y:10, ease:Expo.easeOut});


Link to comment
Share on other sites

Hey qqignatqq. GSAP does a lot of things :) But to here's a simplified way of looking at how GSAP does the single tween above:

  • Create an easing function where you give it a value between 0 and 1 and it returns a percentage according to the ease/function.
  • In a requestAnimationFrame (what we will call a "tick", essentially an update), look at the current time compared to the start time and the duration given. Figure out the percentage of the current time from the start towards the end.
  • Plug that percentage into the ease function to get a new eased percentage.
  • Apply that new percentage to the difference between the start and end values of the properties that need to be eased in the tween (in this case just y).
  • Apply those values to the element(s) themselves.
  • When the end of the animation has been reached, stop checking things every tick.

But like I said, that's a simplified way of looking at it. In reality there's a lot of little gotchas and quirks that GSAP handles for you that you probably don't want to mess with yourself if your situation is much more complicated than the above :) 

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