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
Neha Jain

I have been facing the same issue (wipe animation turning into appear, not fade) on publishing the course, works fine in preview. I am using Storyline 3 and the IE browser. The thing is that I need the animation to work in IE as the end users will have IE browser only.

Will appreciate any suggestions on how to fix this.

Ashley Terwilliger

Hi Micha and Neha, 

I wasn't sure if you saw the earlier answer about this issue so I wanted to share it here again: 

Some web browsers have better HTML5 support than others. One example of this is how they handle masking animations, such as split, wheel, and wipe. To be specific:

Ashley Terwilliger

Hi Cheryl,

Prior to Storyline 3 and 360, our HTML5 support was limited to Chrome and Safari, so the animations were appearing in Flash for IE/Firefox. Flash animations should still be working across all the browsers. 

Also, looks like your email signature came through when you replied via email! No worries, this Peek video will show you how to remove it. 

Cheryl Powell

Yes I know my email signature is attached to my email. What's wrong with that?Also, I never had a problem with Wipe animations playing as Wipe animations in SL2.Cheryl PowellGC Learning Services LLC dba Learn2EngageLearn2Engage.info Instructional Design & e-Learning Specialists888-ELEARN8 (888-353-2768) 

Ashley Terwilliger

Hi Cheryl,

It's absolutely ok to have your signature here - but most people don't realize that it appears as a part of your response in the public discussions. Luckily there is a way to edit it if you didn't want folks to see it. 

The wipe animations in SL2 would have worked in Internet Explorer and Microsoft Edge as you would have seen the Flash based output. Internet Explorer and Edge are a bit lacking in their HTML5 support, and a piece of that is how they don't support masking animations such as wipe. 

If you published your Storyline 3/360 courses for Flash first/only and viewed in those browsers with Flash enabled, the animations should behave normally. If that's not happening, please let me know! We can take a look at your project file to get started and troubleshoot from there. 

Hope that helps clarify! 

Micha van den Enk

I see, unfortunately our customers would rather stop using flash, because of security reasons. I did however build an example which does work on all platforms, maybe this is a solution to look into for implementation of the wipe function in newer versions?

https://www.w3schools.com/code/tryit.asp?filename=FIFTAFUNTEJ1

Micha van den Enk

I'm sorry, different browsers have different keyframes implementations, so hereby an adjusted version:

https://www.w3schools.com/code/tryit.asp?filename=FIFTDUCC4XDU

Unfortunately, the image doesn't load in this stand alone link, but you could insert any other picture in your own developer area, or paste the code into this version:

https://www.w3schools.com/css/tryit.asp?filename=trycss_css_image_overlay_slidetop

Ashley Terwilliger

Hi Micha, 

We know that Flash is something lots of users have asked about and it's something our team is continuing to discuss and investigate. Take a look at the response from my colleague Justin here about our steps for a Flash free future. 

That won't change the support offered from browsers like IE/Edge - but I suspect they'll also be looking at upgrading their HTML5 support and provide a better experience for things like the wipe animation.

Ant Ray

I'm brand new to Articulate & Storyline, and I have to start this post by saying that I absolutely love it. I've tried other platforms and nothing else makes what I'm trying to do so easy. 

I have just spent most of today building the first branch of a software simulation, using the wipe animation to animate instructional text. I reckon I have another week or so of production. Good job I spotted this early, rendering the animation as fade looks terrible! It would have been crushing to discover it right at the end!

Given that it's not going to work as desired (or indeed how it looks as you're building it) for such a significant proportion of the viewing platforms, can I suggest that you remove the Wipe animation as an option? Or perhaps have a health warning appear when you select it?

As a new user, it does ever so slightly undermine what has been a very positive experience so far. 

Thanks a lot :)