DEV Community

Rahul Jain
Rahul Jain

Posted on • Originally published at rahuldkjain.github.io

Getting familiar with gsap.to and gsap.fromTo functions


GSAP library comes up with awesome features to create animations with fewer lines of code and great flexibility. Let's cut the crap and start learning with me using simple examples.

gsap.to() function

If you are familiar with CSS Keyframes then it will be a piece of cake for you. It is used to animate the element from current state(in DOM) to the final state(100% keyframe).

gsap.to() function takes two arguments.

gsap.to(targetElement, { changes to be made })
Enter fullscreen mode Exit fullscreen mode

Let's say I have a ball element with id="ball" and I want to bounce this ball. So the code goes like this

gsap.to('#ball', {
   y: 200,  // to drop the ball i.e transform: translateY(200px)
   duration: 1.5, // duration of the animation
   repeat: -1, // to repeat infinite times
   ease: "bounce.out" // to give the bounce effect,
});
Enter fullscreen mode Exit fullscreen mode

I know you are thinking what the heck ease: bounce.out is that. Don't panic, it's just an ease function that gsap provides to give bouncing effect. Check out other ease visualizers here.

NOTE Properties to change things in gsap differs from CSS properties. I recommend you to bookmark gsap-cheatsheat for future purpose.

Let's see the result.

gsap.fromTo() function

As the name suggests, this function is used to animate the element from initial state to final state.

gsap.fromTo() takes three arguments.

gsap.fromTo(targetElement, { initialState }, { finalState })
Enter fullscreen mode Exit fullscreen mode

Let's say I want to draw user's attention to a specific button using box-shadow property like this

In pure CSS, for button with class="css-button" I'll do something like this

.css-button {
  animation: inout 1s ease infinite;
}

@keyframes inout {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(255,255,255,0.4);
    -moz-box-shadow: 0 0 0 0px rgba(255,255,255,0.4);
    box-shadow: 0 0 0 0px rgba(255,255,255,0.4);
  }
  100% {
    -webkit-box-shadow: 0 0 0 20px rgba(255,255,255,0);
    -moz-box-shadow: 0 0 0 20px rgba(255,255,255,0);
    box-shadow: 0 0 0 20px rgba(255,255,255,0);
  }
}
Enter fullscreen mode Exit fullscreen mode

But in gsap, it hardly takes 4-5 lines to do the magic. For a button with class="gsap-button" I'll do something like this.

gsap.fromTo(".gsap-button", {
  boxShadow: "0 0 0 0px rgba(130, 195, 3, 0.4)"
}, {
  boxShadow: "0 0 0 20px rgba(130, 195, 3, 0)",
  repeat: -1,
  duration: 1
});
Enter fullscreen mode Exit fullscreen mode

That's it! gsap.to() and gsap.fromTo() lays the foundation to learn the gsap library.

Happy Animating!

Discussion (1)

Collapse
agustingarciadev profile image
Agustin garcia

Nice post!
I'm learning to use gsap with react js