damienmajer

Hi Crag,

I do get more desirable results this way. Whats the easiest way to pause all tweens if not on a timeline?

No, the final product will have filters that will remove and add orbits. Any orbits that aren't removed when a filter is applied need to be set back to their start position and begin rotating again. See the attached codepen - how can a reset and restart immediately?

This gets them back to their start position, but only when using pause. How do I return them to their start position but resume the rotation? Or maybe better to remove the animation and start again as a new timeline for performance?

See the codepen...

I cant seem to reset a rotating element back to its starting position - see 

Please could you help?

Thought I'd tried that too. Will give it another go.

Thanks.

Not sure I'm using these functions correctly. The following returns a 'p.restart is not a function' error:

var p = TweenMax.getTweensOf(path);
p.restart();

Thanks for all your help here guys. 

When adjusting the duration, how would you first reset the items rotation back to the 0?

And in your example could I instead select box 3 via a class or data attribute?

That looks to be exactly what I'm after. Thanks!

Hi,

Thanks for your reply.

What I meant was, once all the element are animating, how can I modify the duration of one of the elements? I.e speed up or slow down one item only.

Hey,

When animating an unknown number of elements like so:

var timeline = new TimelineMax({repeat:-1}),
items = document.querySelectorAll('.item'),
startDuration = 20;


for(var i = 0; i < items.length; i++) {
  var myDelay = (i * 0.5);  
  animate(items[i], myDelay);  
}


function animate(item, delay) {
  var a = TweenMax.to(item, startDuration, { rotationZ:'360', ease:Linear.easeNone, repeat:-1 });
  timeline.add(a, delay);
}