CODEWITHSUNDEEP
javascriptjqueryanimationgsap
user3730179
user3730179

Reputation: 121

rotation reverse using tween max

so brief about me - I am a newbie to animations and javascript/jquery.

I have created a ferris with the following html

<div class="ferris-wrapper">
  <div class="ferris-stand"></div>
  <div id="ferris-wheel"></div>
</div>

I was playing around with tweenmax and was able to rotate the ferris-wheel

var ferris = document.getElementById("ferris-wheel");
TweenLite.from(ferris, 0, { rotation:0, ease:Linear.easeNone } );
TweenLite.to(ferris, 10, { rotation:360, ease:Linear.easeNone } );

My question is -

After the ferris wheel rotates 360 degrees. How can I make it reverse 360 degrees the other way? Also, I want this to loop infinitely.

Thank you.

Upvotes: 2

Views: 5448

Answers (1)

Jonathan Marzullo
Jonathan Marzullo

Reputation: 7031

Try adding yoyo:true and repeat:-1 to your tween

var ferris = document.getElementById("ferris-wheel");
TweenMax.from(ferris, 0, { rotation:0, yoyo:true, repeat:-1, ease:Linear.easeNone } );
TweenMax.to(ferris, 10, { rotation:360, yoyo:true, repeat:-1, ease:Linear.easeNone } );

You will have to use TweenMax to use yoyo

yoyo : Boolean - If true, every other repeat cycle will run in the opposite direction so that the tween appears to go back and forth (forward then backward). This has no affect on the "reversed" property though. So if repeat is 2 and yoyo isfalse, it will look like: start - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - end. But if yoyo is true, it will look like: start - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - end.

yoyo:true causes the tween to go back and forth, alternating backward and forward on each repeat.

repeat:-1 makes your animation loop forever

Reference: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/

Also here is a cool Ferris Wheel animation by GreenSock on codepen:

http://codepen.io/GreenSock/details/wBbKs

Hope this helps!

Upvotes: 2

Related Questions