HTML5 wipe animations

Hi All,

I have a simple rollover animation with a world map, that brings up post it notes with info that animate on to the slide as a wipe from the top. The slide previews beautifully, but when published in HTML5 none of the wipe animations work! I have tried this in Firefox and Chrome, with the same results.

Anybody have any previous experience of this glitch.

Regards,

Pete

18 Replies
Ashley Terwilliger

Hi Pete,

Are you viewing this locally when taking a look at those items? You'll want to test by uploading in the intended environment as described here and then it's worth noting we only support Chrome for HTML5 in desktop environments (Safari on a Mac desktop). 

As for the wipe animations, I do know of an issue where those won't work when applied to a video in the HTML5 output. That has been reported to our QA team to investigate but I don't have any other updates to share at this time. 

Ali Goulet

Hi Peter-

What environment are you publishing for and where are you uploading it to when testing it? I do want to mention that our output is not supported for HTML5 in Firefox, however if you're seeing unwanted behavior happen in Chrome as well I'd like to take a look at your file. Would you mind sharing it here? You can add it as an attachment right to a comment in this thread. Thanks!

sonai insley

I've got the same issue - non of the wipe animations are working in chrome. I cant see any guidance anywhere suggesting that wipe are unsupported so it must be a bug I guess. Whats the chances of this getting fixed by the SL team? Just need to know before i go through my project and replace with something that works.

Many thanks

Sonia

Peter Harwood

Hi Sonia,

I narrowed this issue down to images that had been rotated slightly.

If you rotate an image and then apply a wipe animation, this seems to corrupt it.

If you haven't rotated the images, try embedding the image in a shape i.e. create a rectangle and then use the image as a background fill texture - then apply the wipe to the shape.
This resolved the issue in my case.

Regards,

Pete

Crystal Horn

Hi Mark.  In Storyline 360, since we've added HTML5 support for Internet Explorer and Edge, we've found that certain animations do not work in the HTML5 output for those browsers because they do not support clip-paths.  You should see these animations working in the Flash output for IE and Edge, however.  This limitation applies to all "mask animations."

Exit animations that do not work:

  • Random Bars
  • Wipe
  • Split
  • Shape
  • Wheel

Thanks for bringing this up, Mark.  I will see if we can get something documented to add to our knowledge base for everyone to access!

Mark Weingarten

Thanks for the quick reply, Crystal. I'm actually finding that I am having problems on mobile Safari. Wipes worked with courses published as HTML5 from Storyline 2 but not from 360.

It's a bit unfortunate because I have a whole series of courses I developed with custom progress bars (using left-to-right wipes) that won't work with the new tool.

Crystal Horn

Ok, I see.  That sounds like a different issue, then.  Are you finding that the Wipe animations are being replaced with Fade animations, or are they doing nothing at all?  Can you also let me know the iOS version that you are running?  If you've got a file for us to test out, that'd be great too.  I would like to provide this information to our QA team.  We will be sure to update this discussion with further information as we can!  Thanks again.

Alyssa Gomez

Nothing new yet, Colin. We're seeing the issue when the wipe animation is applied by paragraph in HTML5, but it works fine when it's applied as one object. Here's an example that shows the difference in the two, and we're not seeing this issue at all in Flash.

We’re still working on this bug, and I'm sorry if it's causing you headaches. We’ll definitely let you know when we know more!

Adrian van Immerzeel

Hi all,
I'm experiencing the same bug, causing a lot of wasted time.

Wipe animations do not work once the project has been published (even on Preview 360).
Instead the image just appears, causing failed animation / narration alignment.

Storyline 360.
Output: HTML5
Brower: Chrome, IE, Edge
Everything updated.

Please advise.

I can see it's been three years since this bug (and many others have been identified), but not resolved. Has bug-fixing been discontinued on this product?