Hello All,
I am using a repeater to display items from a database. What I would like to do is:
1.slide in first item
2.add transformation for second item
3. add a different transformation to the third item
After three items have been displayed I want to fade out first three and display next three items.
and I want to repeat this process in a loop..
Here is my code: I am stuck in between. I am very new to the web development and GreenSock. Any help will be greatly appreciated!
CSSPlugin.defaultTransformPerspective = 600;
var t1 = new TimelineMax();
$('.tick').each(function (index, item) {
//console.log(index, item);
if (index == 0) {
t1.to(item, .5, { x: 100, ease: Elastic.easeOut }, "+=0.5");
}
else if(index == 1){
t1.to(item, 2, { throwProps: { x: 200 } });
}
else {
t1.from(item, 0.8, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut })
}
});
t1.play();
Thanks & Regards,
Bunnie