Jump to content
Search Community

zIndex in callback not working

Robert Wildling test
Moderator Tag

Recommended Posts

Hi, dear GSAPers!

I would like to change the zIndex of a div after animation has completed. It seems this is what the callback functions are made for, however, the `onCompleteParams` remains a riddle to me.

 

This:

 

const cb_animCompleted = function (params) {
  gsap.set(this, params);
};

gsap.to(almondBox, {
  duration: 0.5,
  x: 50,
  zIndex: 0,
  onComplete: cb_animCompleted,
  onCompleteParams: [{ zIndex: 20 }]
});

 

throws this warning in the console:

 

Invalid property" "zIndex" "set to" 20 "Missing plugin? gsap.registerPlugin()

 

Can you please help understand what I am doing wrong? Thank you in advance!

 

gsap: v3.7.1

See the Pen LYLjJGz?editors=1111 by rowild (@rowild) on CodePen

Link to comment
Share on other sites

Hey @Robert Wildling, the problem is because your scope in on Window, so you are setting the params to the Window object. If you remove the callbackScope, the scope will be on the Tween.
So if you need to set these params to an element, you can do something like:
 

gsap.set(this.targets()[target_index], params);

// or
gsap.set(almondBox,params);

// or

gsap.to(almondBox, {
  duration: 0.5,
  x: 50,
  zIndex: 0,
  onComplete: ()=> gsap.set(almondBox,{zIndex:20})
});


Here you have a video from @Carl where he explains callbacks and callbacksScope 🙂
 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Thank you very much for your quick response! And yes, of course I know Carl's video (however I thought my problem was related to the onCompleteParams method, not the scope...)

 

I use the arrow function now as you suggested, and it works fine, thank you!

 

May I nevertheless dig a bit:

When I remove "callbackScope: this", the context in the callback function should be the tween itself, right (screenshot)? (Even though a "data" property is undefined, but "_pt" references the "almond" div).
 

Do you happen to know, why it is still not possible to assign zIndex?

Bildschirmfoto 2021-09-14 um 10.47.26.png

Link to comment
Share on other sites

Yes, "this" is from the Tween itself, that's because you can't set a zIndex.
_pt is a private property that GSAP uses, if you need to access to the targets, you must use the target () method.
Btw, the data is different than the parameters, you can use it like this:

const tween = gsap.to(almondBox, {
  duration: 0.5,
  x: 50,
  zIndex: 0,
  onComplete: cb_animCompleted,
  onCompleteParams: [200]
});

tween.data = {zIndex:200};

// in the cb_animCompleted
console.log(this.data)

 

  • Like 1
Link to comment
Share on other sites

I made a Codepen for you, to explain better  the reason why that message comes out.

See the Pen 8cda590c89771c124f3d4666a2c39dac by nicofonseca (@nicofonseca) on CodePen



I created two objects but the first one without the zIndex property. So, when GSAP tries to animate its zIndex property it does not exist, then it says:
Hey, I don't know what to do with this! And it is different with the second object which has the zIndex property.

 

Hope my little explanation helps 😅

  • Like 4
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.
×
×
  • Create New...