Regarding HTML5 Animation Support / Timeframes

Hi everyone,

Not sure if this has been asked already, but now that Storyline is integrated into 360 and we can expect rolling updates, is there a timeframe for compatibility with the remaining animations from: "Storyline 360: Some HTML5 Animations and Transitions Don't Work in Internet Explorer or Microsoft Edge"?

Object animations such as:

  • Random Bars
  • Shape
  • Split
  • Wheel
  • Wipe

And Slide / Layer Transitions such as:

  • Blinds
  • Checkerboard
  • Circle
  • Clock
  • Diamond
  • Dissolve
  • In
  • Out
  • Plus
  • Random Bars
  • Split

It might sound silly, but we've made some tremendous strides using combinations of these animations for animating charts, pie-charts, graphs and tooltips, even custom transitions, and it would be fantastic to have these available in HTML5 courses. Many of these animations are unusable in Chrome, Firefox, and Safari too. I know that these sorts of animations can be achieved with relative ease on the web using jQuery libraries, so what is blocking their development?

Many thanks,

Phillip

12 Replies
Leslie McKerchie

Hello Phillip - The article that you referenced above speaks to the actual browsers being a bit lagging in support. I'm not a developer, so I cannot speak to creating these animations differently and the subsequent effect that could have in other environments, but I would encourage you to reach out to our development team via feature request here if this is something you would like to see.

Phillip Rees

Thanks Leslie,
I'll submit a feature request later on. The lack of support is probably to do with SVG animations, though it is strange that the devs wouldn't have implemented a standard fallback for dealing with animations across browser, especially given that jQuery is used.

Either way, I'm still curious about the time-frame for supporting these animations, if any, that might exist (or not). If browsers don't catch up, wouldn't it fall on the developers to ensure that any and all animations that can be used in Articulate Storyline 360 can also be used in all of it's exports, even if it requires a different animation method or fallback? I'm not talking old-hat browsers like IE8/9 here, but if even the latest browsers right out of the gate can't support the built in animations, it does beg the question why an alternative animation method wasn't used.

It's a lot of money to put down on a software package only to be able to use half of it's features in production.

Ashley Terwilliger-Pollard

Hi Phillip,

We don't have a timeline for support of these animations based on the browser specifics and how they'll provide support for them. The animations will revert to something else also based on how the browser will read them such as how masking animations behave like fade animations in mobile Chrome and mobile Safari.

We'll keep you posted about any other changes to this within Articulate and if we hear anything about the other browsers we'll be able to update our documentation as well. 

Crystal Horn

Hi there Terry!  Can you confirm if you're having a different experience than what's listed in this article about masking animations in HTML5 output?

Terry Bell

Crystal, this does not seem to be the same issue.  I'm using SL2, and I tested with wipe and wheel entrance animations, and this is what I found.

  • They work in Chrome, unless there is a glow effect on the object, in which case my circle seems to draw in a square shape and the rest appears suddenly after the animation.
  • In Firefox, the shapes appear suddenly (no fade or anything), but if they have a glow effect, the inner square appears first.
  • In IE and Edge, the shapes appear suddenly (same if they have a glow or not)

Can you confirm that these animations should work correctly in all desktop browsers? Because that is definitely not what I am seeing.

 

Terry Bell

Hi Crystal. No, I do not have flash enabled. I posted on this thread because it is specifically about html5, judging by the title.

In your screener, you say that Storyline2's html5 output is not supported at all EXCEPT in Chrome and Safari.  First question:

  1. If I upgrade to SL3, can you confirm that this will be rectified?

Also, I still am seeing the issue where objects with a glow do not animate smoothly.  Second question:

  1. If you test the sample above in html5, do the objects with a glow animate smoothly for you?

Thanks for the tip about Scorm Cloud, I'll use it if I need to share lessons with you in the future.

 

Leslie McKerchie

Hey Terry,

I see where you reached out to our support team as well. Sorry that your post was flagged and for the inconvenience. We have some spam filters in place specifically for posts too close in 'time' and I'm sure that's what caused the issue.

You are welcome to try a trial of SL3 if you'd like to check out the behavior. I'd be happy to do it if you'd like to share your .story file.

Checking the project file vs the zipped published output or a link to the published output is typically better for us during troubleshooting.

Terry Bell

Hi Leslie,

No problem about the flagged post, I thought I had done something but figured you guys would get to the bottom of it.  :)

I didn't post the project file because it would have been very simple for you to create a new one - it was just one slide with a variety of animations.

I downloaded the SL3 trial, and can confirm that the animations are much better in chrome and firefox, but they still don't work in Edge/IE.  (as the original poster noted). I'll continue to follow this thread and look forward to an update.

Thanks,

T