How does animation work?

[qqignatqq]

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...
https://jsfiddle.net/eymw4o6j/2/

 

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});

 

[ZachSaucier]

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