Wipe Animation plays as a quick fade or jump cut

I'm creating a module in StoryLine 360.  I have set some simple box shapes to come on to the screen using the wipe animation.  When I preview or view in the developer window, all plays the way it should.  When I publish a Web file, or even to Articulate Review, these wipe animations render as a very quick fade...almost a jump cut entrance.  Any help troubleshooting would be greatly appreciated!

38 Replies
Wendy Farmer

Hi Matt

I just did this quick sample and published to Review - the behaviour looks fine to me.  It is two shapes both with a wipe left animation staggered on timeline and slightly different durations.

https://360.articulate.com/review/content/a3c5c153-64fb-404d-a0ea-b1625940fdb5/review

You don't happen to have a transition effect on the slide/layer do you?

Matt Ensenberger

Good day, Wendy!

On one of the slides, there is a fade transition on the base layer with the wipe animation prescribed in a subsequent layer.  I may try to pull the transition on this slide to see if that makes any difference.

There is another slide that has no transition, but does include a wipe animation that is exhibiting the same issue as the one I described in my original post.

Matt Ensenberger

I've been doing a majority of my testing in Microsoft Edge.  I will have to see if I get similar results in some of the other browsers.  Thank you for the suggestion.  I'm open to any and all!

**Update.  Just viewed the file in Firefox and everything played as scripted.  I guess Microsoft can still be the thorn in my side!

Matt Ensenberger

Thank you, for the confirmation.  This is good information to know.  A majority of the clients I do work for are in the accounting field.  They are very much married to the standard Microsoft array of tools.  I will know not to include these kinds of animations when I'm designing for a predominately Microsoft user base.  Thank you again!

Mark Weingarten

Hi All, 

I've been grappling with this issue myself and thought I would chime in. I have a series of courses where I use a custom progress bar on every slide that wipes from left-to-right, so this is pretty important to me. With Storyline 2 output, I didn't notice any problems, but 360 is causing some. In my experience the issue only happens with the HTML5 output, and I have experienced it in IE, Edge, and mobile iOS -- Chrome and Firefox work fine.

Is there a difference in the HTML5 output from Storyline 2 and 360? Is there any way to change the way wipe animations are implemented (in an update, perhaps) back to the way they were before. For the most part, Storyline 360 rendering is superior to Storyline 2, but this is driving me nuts.

- Mark

 

 

Ashley Terwilliger

Hi Mark, 

Since IE/Edge don't support the masking animations (of which Wipe would be included) while viewing the HTML5 output this explains the difference between the browsers and what you were seeing in Storyline 2 (since we didn't support those two browsers for HTML5 viewing). This article documents the other animations that would be included in that. 

Mark Weingarten

Thanks for the quick reply, Ashley. I can live with IE & Edge not supporting wipes in HTML5 because they can alternatively open Flash. The problem with mobile Safari is that it cannot. Courses authored in SL2 worked fine on Safari (HTML5), but 360 courses don't.

Interestingly, I can see the animation problems inside SL360 when I select the mobile device (phone or tablet) preview mode. See the attached file to see what I mean.

Ashley Terwilliger

Thanks Mark for giving me this simple example to test - after I tested it, and found the same thing I found out from our Engineers that iOS10 broke all the wipe animations, so as a precaution we turned it off as a part of mobile publishing. That's why when you're seeing the preview it's showing it as a fade and why it's also not working in mobile Safari when you're viewing the course (regardless of iOS as they turned it off as a whole when they found the wipe animation could make a course unusable in iOS10). It's something our team is keeping an eye with Apple to see what fixes they may be able to implement. 

Mark Weingarten

Thanks for looking into this, Ashley.  To answer your earlier question, I am using iOS 10.2

I went ahead and published the same basic slide in SL2 and SL360. If you test the links below in iOS, you will see that the SL2 version wipes but the SL360 version fades. Therefore, I don't think the problem is in iOS -- it's working just fine with the SL2 version. Could you pass this on to your engineers, as I would love to see this changed back (maybe in the next update?) to the working functionality it had before. 

As they say, if it ain't broke, don't fix it...

mindstreamelearning.com/wipe_360
mindstreamelearning.com/wipe_sl2

Ashley Terwilliger

Hi Mark,

The mobile wipe animation was disabled as a whole within Storyline 360, so it won't work in any iOS or mobile device within Storyline 360. 

I'll share the SL2 behavior with them to get further clarification, as I'd just be guessing as to why it works there vs. not in Storyline 360. Thanks for sharing the links!  

Ashley Terwilliger

Hey Mark -

Just following up as I chatted with one of the Engineers about this and within Storyline 360 there was a change to the player technology that accounts for this difference. The change was based on using a newer technology that is more reliant on new browsers working the way they were designed. So we're keeping an eye on the issue as reported to Apple and continuing to look at ways in which we can modify the behavior in Storyline 360. 

I've got this forum discussion filed with our QA team so that once there is a change to the behavior or fixed in the iOS, we'll be able to update you here. 

Ashley Terwilliger

Hi B,

Thanks for reaching out here - we've gotten confirmation from our team that this is by design as detailed here. It's based on the mobile/HTML5 output not supporting the wipe animations, and also browsers like Edge and IE11 not having as robust HTML5 support. 

I hope that helps clarify, and please let us know if you need anything else!