Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alessio

Animation Circle yoyo

Recommended Posts

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

Link to comment
Share on other sites

Hi alessio,

 

Just use transformOrigin. :)

 

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

 

  • Like 7
  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×