Hover State Has Text From Normal State Appearing
Mar 25, 2022
I have a project in which I want pieces of a triangle image to move a bit outwards when hovered over and show a layer. I was going the motion path route but thought just using states might be a bit easier because I need the image to go back to its original spot when not hovered over. I have the image on the base slide and then went into states and placed text on my normal state. I added a hover state, added the same text again, and then moved both pieces outwards. Created a trigger to change the state of picture to hover when the user hovers over picture.
When I preview, I have the text from both the normal state and the hover state appearing when I hover over the image. I do have "Restore previous state when the user hovers out" selected but I have also unchecked it and it makes no difference.
I'm betting this is a super basic error I am making - this is my first foray back into Storyline after 4 years. Project file is attached - any thoughts?
6 Replies
Alicia,
I think this is a known issue. The text from the normal state bleeds to the hover state. Perhaps someone from Articulate can provide more insight into this. In the meantime, the easiest way to address this (e.g., in my opinion) is to incorporate the text into the image. On slide two, I did this.
Also, since Hover is a built-in state, you don't need to create a trigger. You can see how I modified the trigger in my edited sample.
Try this simple fix, hopefully will work for you - remove the text from the hover state (if it's the same text), plus you don't need the trigger to change state to hover, this should happen by default when hover state created.
Adam,
That would work too unless she wants to maintain the text label when the image moves to the left. As always with Storyline, there are multiple approaches to handling this. Thanks for sharing.
Richard
Fully agreed. With the issue above removing text box from hover state will result in showing the text from Normal state.
I noticed different behaviour of elements on states depending how they were created (you can create as new or duplicate from Normal).
Richard and Adam, thank you both so much! I went with Richard's route since I did want to maintain the text label during movement and now it is working perfectly. Makes me feel a bit better too that the bleed-through is a known issue. Thank you too for the reminder about not needing a trigger for hovering, that saves some clicks.
hi Alicia,
please find attached the storyline file with the way I explained above
On the first slide:
- the hover state is created by clicking the first icon in states, it has the image moved a little to the left, and no text box. in preview the text from the Normal state is displayed (and not moving, which is better for the learners.
On the second slide
I prepared my variation on how this interaction could look/work. The hover state has the image duplicate on top of the original image, made slightly bigger with entry and exit fade animation, additional text box copied on top from the Normal state.
This creates a zoom effect.
With a little more time and effort this could be much smoother and organic.
I hope this is useful.
Good luck with your project.