Simple Overshoot/Pop Animation

[devin1229]

I'm new to this Greensock thing and I'm trying to create just a simple "pop" that adjusts the scale and overshoots it a bit before returning back to the original scale. Something like what's found on

See the Pen dYvLpN by Jtwa (@Jtwa) on CodePen

.

 

I've been pouring over the documentation and I'm not sure if it's using a .fromTo or something. Or do you just link a bunch of gsap.to's together?

See the Pen BaRbpYq by devin1229 (@devin1229) on CodePen

[PointC]

Hi @devin1229 

 

Welcome to the forum.

 

It should be 'ease' instead of 'easing'. Something like this should get you started.

gsap.to(".circle", {
  duration: 1,
  scale: 2,
  ease: "elastic.inOut",
  yoyo: true,
  repeat: -1
});

Happy tweening and welcome aboard.

 

[devin1229]

15 minutes ago, PointC said:

Hi @devin1229 

 

Welcome to the forum.

 

It should be 'ease' instead of 'easing'. Something like this should get you started.

gsap.to(".circle", {
  duration: 1,
  scale: 2,
  ease: "elastic.inOut",
  yoyo: true,
  repeat: -1
});

Happy tweening and welcome aboard.

 

 

Thanks! That gets me closer, but I need the circle to shrink back to the initial scale. The above keeps the scale as 2.
If I were using a CSS animation, it'd be something like:

 

@keyframes animation {
  
  0% {
    transform: scale(0)
  }
  
  80% {
    transform: scale(1.2)
  }
  
  100% {
    transform: scale(1)
  }

 

[GreenSock]

Looks like you just forgot to add repeat: 1. 

 

Is this what you're looking for? 

See the Pen gOWEmMy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

gsap.to(".circle", {
  duration: 0.3,
  scale: 2,
  ease: "power1.inOut",
  repeat: 1,
  yoyo: true
});

 

[PointC]

You left out the repeat property in your revised demo. I used -1 above to just continue the animation infinitely. In your case you'd just want to use repeat:1.

 

Happy tweening.

[PointC]

@GreenSock is such a fast typist.

[devin1229]

Thank you both! I knew it had to be simple.

[Carl]

just to add another option to the list. with yoyoEase you can optionally have a different ease on the repeat. I think the elastic is a bit aggressive

 

See the Pen bGWZqRN by snorkltv (@snorkltv) on CodePen