Hello Peoples,
I'm trying to create this Split-flap Display style animation using GSAP. I've got two images, each split into a grid and upon clicking, all the squares has to flip, revealing the other side. I'm trying to make a nested timeline and to stagger the whole thing.
Here my code:
//Splitting image into a grid
var Split = function(tar) {
this.$t = $(tar);
this.gridX = 6;
this.gridY = 4;
this.w = this.$t.width();
this.h = this.$t.height();
this.img = $("img", this.$t).attr("src");
this.delay = 0.05;
this.create = function() {
$("div", this.$t).remove();
for (y = 0; y < this.gridY; y++) {
for (x = 0; x < this.gridX; x++) {
var width = this.w / this.gridX * 101 / this.w + "%",
height = this.h / this.gridY * 101 / this.h + "%",
top = this.h / this.gridY * y * 100 / this.h + "%",
left = this.w / this.gridX * x * 100 / this.w + "%",
bgPosX = -(this.w / this.gridX * x) + "px",
bgPosY = -(this.h / this.gridY * y) + "px";
$("<div />")
.css({
top: top,
left: left,
width: width,
height: height,
backgroundImage: "url(" + this.img + ")",
backgroundPosition: bgPosX + " " + bgPosY,
backgroundSize: this.w + "px",
})
.addClass("segments")
.appendTo(this.$t);
}
}
};
this.create();
this.$t
.on("click", function() {
$(this).toggleClass("active");
})
.click();
};
$('.split').each(function() {
var split = new Split(this);
split.create();
});
//Flipping animation
TweenMax.set(".segments",{transformPerspective:600});
$('.split').on('click',function() {
var t1 = new TimelineMax();
t1.add([TweenMax.staggerTo($(".top").find(".segments"),1.0,{rotationY:"+=180",ease: Power2.easeIn},0.1),
TweenMax.set(".top",{opacity:0}),
TweenMax.set(".bottom",{opacity:1}),
TweenMax.staggerTo($(".bottom").find(".segments"),1.0,{rotationY:"+=180",ease: Power2.easeOut},0.1)],0,"start",0
);
})
Can anyone help me on this?