I'm trying to up my css and animation game, this is a record of my notes taken while looking into GSAP. I'll constantly be adding to it as I go. The main purpose of this record is a reference for me to use while updating my site using GSAP (gsap)
The gsap object has three helpful methods for creating tweens and optionally adding them to timelines. A timeline is a container for multiple tweens. Each tweens is called a child of the timeline.
For best performance animate CSS transforms and opacities.
Though gsap can animate any numeric property. So not display for example.
gsap.from() and gsap.fromTo()
repeat and delay
The default setting for ease is easeOut. See GSAP Easing for examples of them all. On that page there is a graph whihc shows how the animations run. The steeper the curve, the faster the animation, or movement. The flatter the curve, the slower the animation or movement.
You don't have to specify out as it's implied seeing as it's the default
These can be combined with:
Used to stagger a group of elements animations.
A timeline is a container for multiple tweens.