GSAP Methods
Methods help define the animation destination values and starting values.
from()
to()
Most common GSAP method used to set the end values of a given animation. Initial values automatically set based on the set CSS properties of the given element.
gsap.to(".card" , {
x: 100,
})
form() method is best used for reverse animation. When you set the initial CSS properties, GSAP will animate to the default values.
gsap.from(".card" , {
y:80,
})
fromTo()
with this method you can define both the start and end properties of a given animation .it's takes in two different objects used to specify the start and end value.
gsap.fromTo(".card",{
x:20
} ,
{
x:80,
})
set()
This method comes when you want to set the properties that you will later animate with GSAP.
gsap.set(".box", {x: 10 , y: 20});