Motion Path in HTML5 Not Working

Dec 07, 2016

I have multiple motion paths on a slide that are triggered by variables. All of the variables that are triggering the motion paths are correct, and work when previewing in Storyline 2. But when in an HMTL5 output, some of the motion paths do not work. The non-working motion paths make the character they are attached to disappear and then reappear where the motion path ends (basically skipping the motion path).

Does anyone have any solutions or answers as to why this would be happening to some, but not all of the motion paths? And why it seems to be related to HTML5? I've attached a project file if anyone is willing to take a look.

24 Replies
Wendy Farmer

Hi Janna

I've published your file, uploaded to my webserver and viewed the html5 output in Chrome and it appears to be working


See attached video 

What browser are you viewing the output in? See the technical specs here for viewing SL2

Janna Dorman

Hi Wendy. Thank you for taking a look! You're right - the motion path does work in your video, but if you click through the rest of the icons, the motion paths don't work. I am also working in Chrome and when I viewed the file you published, I am still seeing the same error. I've attached a video of what I'm seeing.

Alyssa Gomez

Hi there Janna,

I published your file, and I can confirm the behavior you describe. All is well in Flash, but the motion path isn't working properly in HTML5. Here are links to the published outputs:

At this stage, it would be most helpful if our engineers could poke around in the file a little to troubleshoot. I went ahead and opened a case on your behalf (#00965820 for my reference), and you should hear from one of our Support Engineers soon. I'll also follow along with the case and post relevant updates to this thread. :)

Alyssa Gomez

For those that might experience a similar issue in the future, I wanted to pop in and share that the support engineers were able to duplicate the issue. We have submitted this to our Quality Assurance team for their review. Since the issue is not occurring in the Flash version of the published output, we recommend publishing the Storyline course for Flash output only.

Helena Smith

Ok, just to make sure that I am clear, on the part that says ink to the story.html file in the published output.  This is the Scorm package that is uploaded into the LMS?  For example, when I am uploading a package into the LMS, The package file is a zip (or pif) file containing SCORM/AICC course definition files.

The linking of the story.html isn't clear to me because I don't see where that would take place. 


Rodrigo Sugahara

It did happen to me, also. 

I was using a free motion path, while triggering some state changes to the animated object (it is a car running on a course and the states are the different perspectives of the car).

There are many animations (A-B, B-C and so on) but it only happened in the first animation.

I redid the object and its states and redrew the motion path and it fixed for me.

I know it's not a permanent solution, but If you, like me, are close to your deadline, then perhaps it can help you out. =)

William Beardsley

Its a shame we do not have the option to choose what format preview will work in as it then requires us to publish a partially completed course in order to view it in FLASH to see if something is functioning correctly. 

I have since fixed my issue by replacing the buttons I was using with images (and adding states to the images). It seems to work fine now. I have attached a partial of the original here though so you can see what I am saying. You can only really use the first two buttons and you will need to click on them a few times to see the different results. When I published it to FLASH it was even worse.

Crystal Horn

Hi there, William.  Thanks for sharing your .story file.  I can see the odd behavior you've mentioned both in Preview and when I publish to Articulate 360.  I'm glad that you were able to resolve this issue by using images instead of buttons.  In the meantime, I'm going to document this behavior for buttons and motion paths in Storyline 360 so we can have a closer look.  

We're working toward eliminating dependency on Flash Player in both our output and the authoring experience in light of expiring support for Flash Player.  I understand your need to test both outputs, though, and hopefully publishing to Articulate 360 and grabbing a quick link will help make that process more efficient for you!

Crystal Horn

William, just an update.  I've narrowed down the issue to when the state is changing on the button during the motion path animation. 

In your file:  When you click the shape on the base layer, it shows the layer where the motion path animation occurs.  Your mouse pointer is still over the area where the button is beginning its animation on the layer.  Because the mouse is hovering over the button, it is causing a custom state change to "onhover."  That custom state change is interfering with the motion path, and I can reproduce that in a new file.

The issue is that custom state changes on buttons interfere with motion path animation when triggered during the animation.

William Beardsley

That makes sense Crystal but do you think that the system should work that way? I often use custom states to avoid the built in states from activating at inappropriate times but I would never have thought that something on a base layer is going to still respond to a mouse activity (and a trigger) when you are no longer on the base layer.

This discussion is closed. You can start a new discussion or contact Articulate Support.