Jump to content
GreenSock

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

Dynamic rotation loop

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, I'm new to GSAP so my issue could (hopefully) be peanuts for you guys  :)

 

I want to loop a timeline and add 90 degrees to the variable rotation every time it runs. Can't get it to work, because TimelineMax keeps the original value of rotation. The variable does get updated though..

See the Pen WbVyWG by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Thanks for the demo. Its very helpful.

 

 

One thing to keep in mind about timelines is that they are intended to play, repeat and reverse exactly the same way.

GSAP records the start / end values of all the tweens so all iterations can play as fast as possible (instead of querying those values again and again).

 

As Diaco illustrated, it is possible to update the recorded values, but frankly, its a lot of work. 

 

A downside of adjusting the recorded values, or injecting new tweens into the timeline on each iteration is that you will never be able to reverse the timeline properly and see a full 360 rotation again. You kind of lose all those "previous" values and iterations.

 

If you simply want the effect of an object spinning around in certain rotational increments with delays, I think Diaco's first example is perfect.

 

However if you want that same effect but also need to reverse it or control how many full rotations it does I would suggest creating a loop that just puts a bunch of tweens into a timeline.

 

 

var delay = 0.5;
var steps = 8;
var rotation = 360 / steps;


var tl = new TimelineMax({
delay:delay,
  repeatDelay:delay,
  repeat:2
});


//build a timeline with 8 tweens with a gap of delay (0.5) between each
for (var i = 0; i < steps; i ++){
  tl.to(svg, gsapTiming, {rotation:rotation * (i+1)}, "+=" + delay)
}

 

Take a look here

 

http://codepen.io/anon/pen/WbVyWG?editors=001

  • Like 1
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.
×