Overlapping States

Apr 05, 2022

Spencer Wolf
By Spencer Wolf

I've been noticing a randomly occurring, but frequent, issue since the newest update. On some objects, the Normal/Original state will overlap with any other state (Hover, Visited, custom states, etc.) 

So when you hover over a button, the text might change color, or an image might change, but the original text or original image can still be seen underneath. 

Here is a quick example, a side by side screenshot from a published example:

Example of Issue/Glitch

On the Hover state, the icon is changed so that the bars on the chart sit a little higher when hovered over, though you can still see the original icon being used underneath when this happens. Additionally, you can see the stroke thickness looks more intensified as the images are overlapping. If I did this with a lighter text color on the hover state, and made it bold, you could still see bits of the original text peeking out from behind. I've tried testing this with .PNG, .SVG, .GIF, and other transparent files, but it happens with Storyline assets as well.

Example of Issue/Glitch 2

Here's another example using an icon built into Storyline. On Hover, the icon should just rotate 90 degrees, however, when in Preview or Published mode - the icon overlaps, and instead of having horizontal lines, we're left with a waffle/grid. Each example was made using a new Storyline file.

What's strange (or stranger) is that I can make a new state, set it to hover, delete all the objects on that new state, copy and paste in place the original assets used, and then swap the icon - and it will still happen.

The only workaround I have is to paste in place the base of the button (in this case the white rounded rectangle) two or three times, depending on any shape effects (e.g. drop shadows), which adding a bunch of objects to one state doesn't always yield the smoothest results once published. Additionally, in some circumstances, doing this causes a flicker effect on the hover state where the new button base flashes in before the rest of the other objects do, or the drop shadow will flicker when hovered over.

Fixes? Workarounds? Is this a known issue that needs to be patched? 

 

 

61 Replies
Spencer Wolf
8 months ago09/08/23 at 1:34 pm (UTC)

Hi Brett,

I've been in that exact situation, where I need the button to appear as those it's pressed down, and there are several ways I've gotten around it. 

I'm attaching an SL file with 4 buttons:

The first three are all based on "covering up" the original state, as has been suggested. HOWEVER, we're going to make the bottom most layer match the background. I'll refer to this as the "False Background" method.

False Background Method

  1. Create your button and it's Normal state.
  2. Go to States > Edit States > Duplicate or New State > Hover
  3. Make your shrunken Hover state
  4. Now... here's where the magic happens. Go to your first state and copy the shape of the original button.
  5. Paste in Place (CTRL + SHIFT + D) on your Hover state.
  6. Delete any text and recolor it so it matches the background of the slide (in this case, I made the purple rectangle WHITE)
  7. Go to Arrange > Move to Back
  8. If that doesn't work right away, copy EVERYTHING on the Hover state, delete it, and paste in place everything. That sometimes gives it the extra push it needs.

I've used this method on 3 different buttons in the example; one with a hover state, a down state, and one that is even 3D. 

If you'd like to dissect them, just CTRL + A and copy everything inside the Edit States function, and then paste it outside on the timeline!

New State Method

This method is preferred if you cannot cover up the background. Such as if you have a photo background, video background, gradient, etc. and either can't or don't want to cover it. If you like working with triggers, it's especially fast and easy - albeit cumbersome and not as evergreen.

  1. Create your button's Normal state
  2. Create a New State, DO NOT PICK A PREMADE STATE MAKE A NEW CUSTOM STATE
  3. Name your State (I named this one "_Hover")
  4. Edit State > Edit the button's New State to look how you want
  5. Exit Edit States
  6. Create a new trigger: Set state of (Button) to (New State) When the (user hovers over) (Button) (restore previous state when the user hovers out)
  7. If it doesn't work right away, do the COPY/DELETE/PASTE IN PLACE step mentioned above on your New State. 

I hope this helps out! Let me know if it does, or if there's anything else!

Beth McNamara
6 months ago11/10/23 at 10:26 pm (UTC)

I am having the same issue. this is such a basic function of Storyline, that my work has stalled...

I'd appreciate an updated response from Articulate to this issue. Rather than pushing each individual designer to support, please respond to this (and/or multiple other) posts about this issue with a solution. If none (yet), just let us know! 

Lynsie Lukashin
5 months ago12/04/23 at 9:44 pm (UTC)

I'm also having this issue. I have a group of teal icons that turn white on hover, and should turn grey after being visited. Instead, they are remain teal/white in normal/hover mode and do not show the visited state.

The same states and triggers work fine on the text below the icons, but not on the icons. If I disable the hover triggers, the visited state works. I even created a custom hover state, but the bug persists.

In my attached one-slide example, the computer icons have the hover state and the other two icon groups do not as proof of concept.

Please help!

Steven Benassi
5 months ago12/05/23 at 1:56 pm (UTC)

Hi Lynsie!

Sorry to hear you've hit this snag with visited states from your Storyline course!

I see that you've already opened a support case as well. Great move! You're in excellent hands working one-on-one with our support engineers and should be hearing from them shortly.

We can continue troubleshooting through your case to keep all information in one spot.

Jose Tansengco
2 months ago03/04/24 at 3:08 pm (UTC)

Hello J C,

Sorry to hear that you ran into this issue as well. Our support team has identified the following workarounds which seem to have worked for some users: 

  • Remove the shape from the Normal state that persists in the Hover state. Here is a Peek 360 recording showing this workaround.
  • Imagine that when editing the other states, the other objects from the Normal state are there. You'll just need to edit and overlap the state's objects with themselves to effectively "hide" the objects from the Normal state.

Feel free to open a case with our support team here so we can look at your project file and check which workaround works best for you while we permanently address the behavior.

Sign In to Reply