Animation Circle yoyo

[alessio]

Hi, I'm a beginner with tweenmax and I was playing with basic animations. Instead of doing the animation with "animate" I wanted to try to animate a circle with the yoyo effect, but the animation is not central. Thanks in advance for advice.

See the Pen YYVERo by kaos-alessio (@kaos-alessio) on CodePen.

[JPF]

Hi alessio,

 

Just use transformOrigin.

 

TweenMax.fromTo('.test', 0.6, {scale: 1}, {scale: 1.1, repeat: -1, repeatDelay:0, yoyo: true, transformOrigin: 'center center'});

 

[PointC]

Hi @alessio

 

Welcome to the forum.

 

You just need to add transformOrigin to your tween so the element scales from the middle like this:

 

TweenMax.fromTo('.test', 0.6, {scale: 1}, {scale: 1.1, transformOrigin:"center center", repeat: -1, yoyo: true});

 

More info here:

https://greensock.com/docs/Plugins/CSSPlugin#transformOrigin

 

Hopefully that helps. Happy tweening and welcome aboard.

[alessio]

@JPF @PointC Thanks for the timely answers. I will reread the docs to understand better.

[Jonathan]

Hello @alessio and Welcome to the GreenSock Forum!

 

You can find more info on transform-origin and CSS transforms here:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms

 

Happy Tweening