Animations not displaying in HTML5 published project

I have created a Storyline project in which the title screen is a set of 'live tiles'. The user clicks the tiles and is brought to another part of the course. To make it look interesting, I have added 'grow' or 'fly in' animations to the shapes and images that make up the live tiles. Unfortunately, in the published HTML5 version, the animations only function sporadically - the initial 'grow' animation on the first few shapes seems to work, but then when the rest of the shapes appear, many of them have no animation or jerky animation. This is most pronounced in Firefox, but there is also evidence of it in Chrome. Why is this and is there anything I can do to fix it?

13 Replies
Zio Fonta

same problem here, with grow animation in html5. Items appear at original size for a fraction of time before starting the grow animation. this happens randomly but about 30-40% of times. Our customers was so disappointed because of that, so they asked us to change all grow animations to "fade", on ALL courses...

Zio Fonta

hi Leslie, i haven't find a good solution to fix the problem on grow animations, I just was forced to change all animations to "fade" type, but consider that this activity took me several hours on a whole group of courses that were afflicted by this issue. There must be a sort of bug in the way js for the grow animation is generated in the html5 published version. I have created several "grow" animation using other tool (i.e. Adobe Edge) in a test html file and tested on all browser and devices, and they never display the same bug.

thank you

Matt Walsh

Hello,

I think I am having a similar issue. I have an image in the center of the screen that needs to grow  larger a few seconds into the slide. Since it seems you cannot set the initial size on the grow animation, I had the animation starting behind an image in the start state that I wanted, and then hid the top image as the animation reached the same size. This looks great in the Flash output, but the timing is way off in HTML5, to where it's unusable. I tried using an image state as someone mentioned in another thread, but it doesn't really animate and looks a bit clunky.

Is there any way to set an initial size to start the grow animation or have the timeline sync appropriately in HTML5?

Alyssa Gomez

Hi Natascha, sorry you're running into this! We're seeing an issue in Storyline 2 where Grow entrance animations flicker in HTML5, but they work well in Flash. Here's a screen recording that compares the two. 

As a workaround, I'd recommend using a different entrance animation--the Shape animation with the Out effect is very similar to Grow. 

Thanks again for bringing this up, and I'm sorry it's causing you headaches!