Thursday, 8 August 2013

Loop the Items in the Repeater for Timeline display

Loop the Items in the Repeater for Timeline display

I am using Timeline to animate(Tweening) my Repeater items. There are
multiple items in the Repeater. I would like to display first three items
in my Timeline and then next three items until the end of all items.
Repeat this process once I am done with the items in the Repeater. My
logic displays all the items and repeats once it reaches the end but I
would like to do it for the set of three.
<script type="text/javascript">
$(document).ready() {
CSSPlugin.defaultTransformPerspective = 600;
var t1 = new TimelineMax({ repeat: 1000, yoyo: true, repeatDelay: .5 });
$('.tick').each(function (index, item) {
if (index == 0) {
t1.to(item, .3, { x: 20, ease: Back.easeOut });
t1.to(item, 0.4, { x: 0, ease:Back.easeOut, opacity:50 })
}
else {
t1.from(item, 0.7, { x: 100, rotationX: -90,
transformOrigin: "50% 0px", ease: Back.easeOut })
}
});
});
Can someone suggest me what would be better way to do it?

No comments:

Post a Comment