Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
driftedBoat

Split-flap Display style animation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?

See the Pen mMVqbB?editors=1010 by DriftedBoat (@DriftedBoat) on CodePen

Edited by driftedBoat
Clarifications
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Nice demo. We usually don't have a lot of time to help construct advanced effects like this as we like to focus our attention on the GSAP API.

However I have an idea that might help.

 

I think the problem is that everything inside .top is always going to be visually stacked on top everything inside .bottom.

A solution may be to just rotate each image 90 degrees like so:

 

See the Pen ZJWOQN by GreenSock (@GreenSock) on CodePen

 

 

 

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×