.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
Help with overlapping items on repeat Timeline
Hey guys,
I'm really stumped here and i can't figure it out. I'm trying to build a 3d carouselle, but when i use staggerto with delays to make it work on restarting the timeline everything snaps into their positions on initial setup. Is there a way on restarting the timeline to remember where everything in the stagger to is stored and continue from that position to keep looping? Also side topic but on putting my code in the pen the perspective changes even though the code is exactly the same.
Another way to offset an animation is to use negative delays. The timeline will normalize the time difference so you won't see a delay.
Here's how you can create your timeline using map reduce.
var timeline = boxes.map(bezierTween)
.reduce(buildTimeline, new TimelineMax({ repeat: -1 }));
function bezierTween(box) {
return TweenMax.to(box, time, { bezier: bezier, repeat: -1 });
}
function buildTimeline(tl, tween, i) {
return tl.add(tween, i * delay);
}
Demo...
S
