Multiple pages flip

[kabe]

Hi everyone! My first post here.
I want to create multiple pages flip animation (book like) and I have issue with z-index of my pages. My initial approach was to set z-index to 1 but i have bug visible on codepen: z-index of first page changes ~500ms after animation starts, the rest of pages seems fine. What would be yours approach to this issue?
Thank you in advance

See the Pen GRjzJRw by kvonverletzt (@kvonverletzt) on CodePen

[akapowl]

 

Hey @kabe - welcome to the forums.

 

I tinkered with your example a bit, trying to set the zIndex for the target of the tween inside of GSAP's callbacks.

 

When setting those callbacks to the stagger-object it seems to work.

On start the zIndex will be set to 999 and on complete it will be set to 1 in this example, resulting in the animated element always being topmost.

 

tl.to('.page', {
  rotationY: 180,
  stagger: {
    each: 2.0,
    onStart: function() {
      gsap.set(this.targets(), { zIndex: 999 })
    },
    onComplete: function() {
      gsap.set(this.targets(), { zIndex: 1 })
    },
  },
  ease: 'linear',
  duration: 2,
  //zIndex: 1,
  transformOrigin: "100% 50%", 
})

 

I'm not sure if this is the most profound way, but it seems to work quite right.

 

See the Pen 737e806d2ad1d2bca4e46ad037fec090 by akapowl (@akapowl) on CodePen

 

 

 

Interestingly enough, on the way to this, by accident I found myself using a onRepeatComplete on the tween itself, which confuses me a lot.

It does work as intended or anticipated - but I myself actually have never seen it before ( and getting to this here was only an accident ) and it is not to be found in the docs 🤔 ...or maybe I just can't find it!?

 

Maybe @GreenSock or @ZachSaucier could enlighten me on this?  

 

See the Pen 124ef5d06b844310b0a395d990b53cb1 by akapowl (@akapowl) on CodePen

 

 

[kabe]

Thanks @akapowl ! I don't know if my approach overall is good so if anyone got better solution don't be shy 😁