Useful GSAP Method to create GSAP animation

GSAP Methods


Useful GSAP method to create GSAP Animation


Methods help define the animation destination values and starting values.

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


from()

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




Previous Post Next Post