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 Group 5 (blue text field). I have ensured that the layering is correct. I have closed and reopened the project. I have deleted the object and replaced it with another from a similar slide. Nothing seems to work. I appreciate any insight to this.
Slide 8.1
Steps to get through interaction:
- Grab the Red Plug and drop onto where the green arrow indicates, then
- Turn the dial to the indicated location.
- De-select the indicated radio buttons.
The dialog will complete and the blue shape will move along a motion path and should cover both red and black plugs, but doesn't.
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.
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.
Hello Terry,
Sorry to hear about your experience with the drag-and-drop interaction. I reproduced this in a sample Storyline project and confirmed that this issue is related to a known bug in which the drag object is placed in front of other objects after dropping to the target.
Our product team is aware of the problem, and we'll let you know once the fix is available. In the meantime, you can try reducing the height of the blue text field so it won't cover the Red plug after the motion path is complete.
Please don't hesitate to reach out if you have additional questions.
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.
