Forum Discussion
Object showing above when it should be below
Hi Everyone... I have an interaction that is driving me crazy and unable to solve. It should be simple, but doesn't want to be. I have an object (Red Plug) that should be displayed underneath the Gro...
I solved it!!... Well I tricked it. Since my plug is a grouped object, I can’t change states, so I exported it to an image. I place the image version in the location where the object would be dropped. I set the beginning state to hidden. Set a cue point at some point after the time the drop would happen to change back to normal. I moved the object visibility to go away at the same time as the cue point. So now, the dropped object is no longer part of the equation. It works beautifully.
you might be able to fix this by changing the z-index of the element.
Start with giving your group a accessibility name.
Then you can target it when needed with this code.
let redPlug = document.querySelector("[data-acc-text='redPlug-grp']");
gsap.set(redPlug, { css:{zIndex:-500}});
Offcourse you have to figure out the proper z-index. In the console you can check what z-index the shape has...and ensure it is set to 1 below ( or add a input and a button to the Storyline and change it to see what you need ) - 500, as i do in the sample code is under everything and the redplug will disappear. And then you have to trigger this after the drop happened offcourse.
