Dynamic rotation loop

[Meneerfab]

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

[Diaco]

Hi Meneerfab 

 

pls try these :

 

See the Pen raXrmZ by MAW (@MAW) on CodePen

 

See the Pen emqjWj by MAW (@MAW) on CodePen

[Meneerfab]

Thanks!

[Carl]

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