问题描述:

I'm trying to make an animation of a book opening and closing using HTML, CSS, and GSAP. I have two problems:

  1. The pages need to rotate into open and closed positions.
  2. The z-index for one of the pages needs to change, and for some reason

    it's not.

GIF animation of what I want it to look like



JS Fiddle showing current implementation



HTML

<div class="cover-info">

<a id="main-toggle" href="#">

<div class="book-container">

<span class="book-page p1"></span>

<span class="book-page p2"></span>

<span class="book-page p3"></span>

<span class="book-page p4"></span>

</div>

</a>

</div>

JS (using JQuery)

$(".cover-info").each(function(index, element) {

var p1 = $(".book-container .p1");

var p2 = $(".book-container .p2");

var p3 = $(".book-container .p3");

var p4 = $(".book-container .p4");

var tl = new TimelineLite({paused:true});

tl

.to(p1, 0.25, {

css: {

rotationY: "180deg",

transformOrigin:"0 100%",

},

ease: Power1.easeOut

})

.to(p2, 0.2, {

css: {

rotationY: "135deg",

skewY: "30deg",

transformOrigin:"0 100%",

},

ease: Power1.easeOut

})

.to(p3, 0.1, {

css: {

rotationY:"45deg",

skewY: "-30deg",

z: "2",

transformOrigin:"0 100%",

},

ease: Power1.easeOut

});

element.animation = tl;

});

$(".cover-info").hover(over, out);

function over(){ this.animation.play() };

function out(){ this.animation.reverse() };

网友答案:

I figured it out — apply the rotationY as a GSAP attribute, not CSS.

  $(".cover-info").each(function(index, element) {
    var p1 = $(".p1");
    var p2 = $(".p2");
    var p3 = $(".p3");
    var p4 = $(".p4");
    var tl = new TimelineLite({paused:true}); 

    tl
      .to(p1, .2, {
        rotationY: "180deg",
        css: {
          skewY: "-180deg",
          transformOrigin:"0 100%",
          zIndex: "2",
        },
        ease: Power1.easeOut,
      })
      .to(p2, .15, {
        rotationY: "135deg",
        css: {
          skewY: "-135deg",
          transformOrigin:"0 100%",
        },
        ease: Power1.easeOut,
      })
      .to(p3, .05, {
        rotationY:"45deg",
        css: {
          skewY: "-45deg", 
          transformOrigin:"0 100%",
        },
        ease: Power1.easeOut,
      });
    element.animation = tl;
  });
  $(".cover-info").hover(over, out);
  function over(){ this.animation.play() };
  function out(){ this.animation.reverse() };
};
相关阅读:
Top