GSAP Flip Problem with absolute position and z-index

[animationmagic]

Hi there,

 

I just tried out Flip and must say, I love it! I've tried to build a webpage with two container and want one of them to fill out the whole main container on animation. The h2s in my build have to have z-index=50 for another animation.

 

My issue is, that even though I set the zIndex here to 99 it does not take effect.

 

  Flip.fit("#box-two", ".main-container", {
    duration: 0.5,
    ease: "expo.inOut",
    absolute: true,
    zIndex: 99
  });

Here is a demo of what I am trying to do

 

Any help is greatly appreciated!

See the Pen KKEmQLq by lisaschumann (@lisaschumann) on CodePen

[mvaneijgen]

I'm no Flip expert,  but a Flip tween is something special and is created to do a specific thing, so it is something else than a normal tween. I'm going to mark the topic, so that if someone else has a better explanation maybe they'll chime in, but you could just use a gsap.set() in one of the callbacks to set the properties zIndex. Hope it helps and happy tweening! 

 

See the Pen VwRbxYm?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[animationmagic]

 Hey @mvaneijgenthanks for coming back to me so quickly!

This works great. Is there a reason using zIndex directly with Flip does nothing but setting it on onStart works?

On other issue I have with the setup you proposed is that I need to set the zIndex back to 1 on animation complete but it cannot find this.targets()[0] in the onComplete.

 

            onStart: function(){
              gsap.set(this.targets()[0], {
                zIndex: 99,
              })
            },
            onComplete: () => {
              gsap.set(this.targets()[0], {
                zIndex: 1,
              })
            }

 

[animationmagic]

I found out that if I write the onComplete like this it returns this as the Tween.

onComplete: () => {
  console.log(this)
}

while when I write it with this syntax this returns the Vue instance for me

onComplete: function() {
    console.log(this)
}

 

Then my second question is resolved:) and I would just like to understand why zIndex directly on Flip.fit() does not take effect but setting it on the onStart works.

[mvaneijgen]

That I find weird. Arrow functions should not create their own this and a 'normal' function does. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions but maybe Vue.js does something with them on run time?

 

// This should log the tween
onComplete: function() {
    console.log(this)
}

// This should not 
onComplete: () => {
  console.log(this)
}

 

28 minutes ago, animationmagic said:

Then my second question is resolved:) and I would just like to understand why zIndex directly on Flip.fit() does not take effect but setting it on the onStart works.

That because a Flip.fit() is not a tween on them selfs. It is a special function which not has the same features as at gsap.to() or gsap.from() tween. On the callbacks you just create a single duration tween with gsap.set() and in here you can use all the normal gsap tween features.  I've marked the topic, so probably at a later time someone will chime in with a better explanation. 

[Rodrigo]

Hi,

 

As far as I can tell Flip Fit is just for the flipping stuff and while you can configure some callbacks (as Mitchel shows in his demo) and other Tween specific properties, is not intended to create a tween like gsap.to() for example, where you can point to every css property that could be animated or any other numeric property.

 

That's why tweening zIndex is not working, is just being ignored because is not recognized as something the Fit method should handle:

https://github.com/greensock/GSAP/blob/master/src/Flip.js#L949

https://github.com/greensock/GSAP/blob/master/src/Flip.js#L194

 

One option is do what Mitchel already suggested. Another is to create a timeline and use the position parameter to start the fit instance and the zIndex one at the same time (a Flip.fit() method returns a GSAP Tween, so you can add it to a GSAP Timeline):

gsap.timeline()
  .add(
  Flip.fit("#box-two", ".main-container", {
    duration: 0.5,
    ease: "expo.inOut",
    absolute: true,
  })
).set("#box-two", {
  zIndex: 100,
}, 0);

Or create another GSAP instance that sets the 

Flip.fit("#box-two", ".main-container", {
  duration: 0.5,
  ease: "expo.inOut",
  absolute: true,
});
gsap.set("#box-two", {
  zIndex: 100,
});

As for the this situation, that's really odd. Even inside a Vue instance this on an arrow function should be either the window object or undefined, while in a regular function should be the GSAP instance:

import { onMounted } from "vue";
import gsap from "gsap";

onMounted(() => {
  const tl = gsap.timeline({
    onStart: () => console.log(this), // -> undefined
    onStart() {
      console.log(this), // -> GSAP Timeline
    },
    onStart: function() {
      console.log(this), // -> GSAP Timeline
    }
  })
  .to(el, { x: 100 });
});

 

Hopefully this clear things up.

Happy Tweening!

[GreenSock]

4 hours ago, mvaneijgen said:

That I find weird. Arrow functions should not create their own this and a 'normal' function does. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions but maybe Vue.js does something with them on run time?

 

Yep, arrow functions lock in the scope based on where the arrow function is created whereas normal functions can be assigned a different scope, like via .apply(), .call(), and .bind(). That behavior is totally unrelated to GSAP. 

 

5 hours ago, animationmagic said:

I would just like to understand why zIndex directly on Flip.fit() does not take effect but setting it on the onStart works.

Think of Flip.fit() as a very specialized kind of gsap.to() where it sorta blacklists a subset of properties like x, y, etc. because the fitting functionality kinda requires overriding those. zIndex is one of the blacklisted properties, that's all. Basically that means it won't let you set that directly via a Flip.fit(), but that's super easy to work around by doing it with a gsap.set(), as suggested above. For example: 

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

 

Does that clear things up? 

[animationmagic]

Thanks so much to @Rodrigo, @mvaneijgen and you @GreenSock for helping me understand the concepts here.

 

I am wondering if zIndex as one of the optional properties should be remove from the documentation here https://gsap.com/docs/v3/Plugins/Flip/ in that case, as it cannot be set here.

 

I now made my animation work and it's looking great! Thank you!

[GreenSock]

9 hours ago, animationmagic said:

I am wondering if zIndex as one of the optional properties should be remove from the documentation here https://gsap.com/docs/v3/Plugins/Flip/ in that case, as it cannot be set here.

No, it's still valid for Flip.from(), for example. It's just Flip.fit() that it wasn't really a thing for past versions. 

 

9 hours ago, animationmagic said:

I now made my animation work and it's looking great! Thank you!

🥳