Shape entrance animation is jittery

Aug 26, 2021

Hi

I've searched around and can't find a resolution to an issue similar to this, so hoping i can get some help.

I'm working on a course and the assessment questions have multi-select responses. These questions have been created outside of the question bank and are just regular slides.

The responses are shapes with text added to them and each of them have a hover state that includes a 'Wipe' entrance from the left of its current position (i.e. Entrance set to None). The intention is for when you hover on the shape, it appears to change colour and "grow" back into place.

The issue I'm having is that when the hover state animation triggers, it is extremely stuttery and jittery. I've tried removing and replacing the shapes, but it hasn't resolved anything.

Attached is a video of the issue, the .story file and the zipped published file.

3 Replies
Math Notermans

The issue with states in Storyline is that it immediately changes whenever you hover out...or hover over anyother element. Thus cutting off any animation you create inside the states.

So what you need to do is find a way to keep the animations running smoothly whenever a user hovers out. It is possible using Javascript or variables i think. Or maybe by using custom states instead of the built-in ones...

Julian Dardenne

In this case I assumed that once i hover on the normal state, it disappears and is replaced by a growing hover state. So you're saying that if the mouse is moved and interacts with any other element (e.g. the background before the hover state has fully grown), that interrupts the hover state animation?