I have created a Storyline project in which the title screen is a set of 'live tiles'. The user clicks the tiles and is brought to another part of the course. To make it look interesting, I have added 'grow' or 'fly in' animations to the shapes and images that make up the live tiles. Unfortunately, in the published HTML5 version, the animations only function sporadically - the initial 'grow' animation on the first few shapes seems to work, but then when the rest of the shapes appear, many of them have no animation or jerky animation. This is most pronounced in Firefox, but there is also evidence of it in Chrome. Why is this and is there anything I can do to fix it?
Would you be able to share your .story file here so that we could test it out and see what's happening? If you'd prefer to not share in the forums, you're welcome to share it privately here.
same problem here, with grow animation in html5. Items appear at original size for a fraction of time before starting the grow animation. this happens randomly but about 30-40% of times. Our customers was so disappointed because of that, so they asked us to change all grow animations to "fade", on ALL courses...
hi Leslie, i haven't find a good solution to fix the problem on grow animations, I just was forced to change all animations to "fade" type, but consider that this activity took me several hours on a whole group of courses that were afflicted by this issue. There must be a sort of bug in the way js for the grow animation is generated in the html5 published version. I have created several "grow" animation using other tool (i.e. Adobe Edge) in a test html file and tested on all browser and devices, and they never display the same bug.
I know you and I previously worked on an issue associated with the grow animation in HTML5, and it looks like that issue is still with our QA team. If you've run into a different issue we're always happy to take a look as Leslie mentioned.
I think I am having a similar issue. I have an image in the center of the screen that needs to grow larger a few seconds into the slide. Since it seems you cannot set the initial size on the grow animation, I had the animation starting behind an image in the start state that I wanted, and then hid the top image as the animation reached the same size. This looks great in the Flash output, but the timing is way off in HTML5, to where it's unusable. I tried using an image state as someone mentioned in another thread, but it doesn't really animate and looks a bit clunky.
Is there any way to set an initial size to start the grow animation or have the timeline sync appropriately in HTML5?
I don't know of a way to set the initial size or the timing of the object as you mentioned, but those both sound like good ideas to share here with our product development team as well.
So after the 1 year articulate is not able to solved these issues! Same issues occurring for me in HTML 5 output . Animations of Shape - IN/OUT, Split - vertical out, Picture effects -> Shadow -> Perspective Diagonal Upper Left NOT SUPPORTED!!
This issue is still with our team for investigation and I don't have any updates on it to share at this time. You can see the updates that we have released over the past year documented here.
Thanks for sharing that here - since our HTML5 output is supported with Chrome, and not in Firefox yet, I would expect there to be different behaviors there. Glad Chrome is an option for you.
Hi, We are still experiencing the Grow animation issue (items appear at original size for a fraction of time before starting the grow animation). Is there any workaround for this issue available yet? We are working in SL2. Thank you!
Hi Natascha, sorry you're running into this! We're seeing an issue in Storyline 2 where Grow entrance animations flicker in HTML5, but they work well in Flash. Here's a screen recording that compares the two.
As a workaround, I'd recommend using a different entrance animation--the Shape animation with the Out effect is very similar to Grow.
Thanks again for bringing this up, and I'm sorry it's causing you headaches!
13 Replies
Hi Seaghan,
Would you be able to share your .story file here so that we could test it out and see what's happening? If you'd prefer to not share in the forums, you're welcome to share it privately here.
same problem here, with grow animation in html5. Items appear at original size for a fraction of time before starting the grow animation. this happens randomly but about 30-40% of times. Our customers was so disappointed because of that, so they asked us to change all grow animations to "fade", on ALL courses...
Hi Zio! This thread is a bit dated and it sounds as if you found a resolution for your customers.
I wasn't sure if this is just something you wanted to share as a suggestion or if you needed us to take a look?
hi Leslie, i haven't find a good solution to fix the problem on grow animations, I just was forced to change all animations to "fade" type, but consider that this activity took me several hours on a whole group of courses that were afflicted by this issue. There must be a sort of bug in the way js for the grow animation is generated in the html5 published version. I have created several "grow" animation using other tool (i.e. Adobe Edge) in a test html file and tested on all browser and devices, and they never display the same bug.
thank you
Hi Zio,
I know you and I previously worked on an issue associated with the grow animation in HTML5, and it looks like that issue is still with our QA team. If you've run into a different issue we're always happy to take a look as Leslie mentioned.
Hello,
I think I am having a similar issue. I have an image in the center of the screen that needs to grow larger a few seconds into the slide. Since it seems you cannot set the initial size on the grow animation, I had the animation starting behind an image in the start state that I wanted, and then hid the top image as the animation reached the same size. This looks great in the Flash output, but the timing is way off in HTML5, to where it's unusable. I tried using an image state as someone mentioned in another thread, but it doesn't really animate and looks a bit clunky.
Is there any way to set an initial size to start the grow animation or have the timeline sync appropriately in HTML5?
Hi Matt,
I don't know of a way to set the initial size or the timing of the object as you mentioned, but those both sound like good ideas to share here with our product development team as well.
So after the 1 year articulate is not able to solved these issues! Same issues occurring for me in HTML 5 output . Animations of Shape - IN/OUT, Split - vertical out, Picture effects -> Shadow -> Perspective Diagonal Upper Left NOT SUPPORTED!!
Hi Vivek,
This issue is still with our team for investigation and I don't have any updates on it to share at this time. You can see the updates that we have released over the past year documented here.
I found this to be an issue with Firefox but with Chrome it;s OK.
Hi Simon,
Thanks for sharing that here - since our HTML5 output is supported with Chrome, and not in Firefox yet, I would expect there to be different behaviors there. Glad Chrome is an option for you.
Hi, We are still experiencing the Grow animation issue (items appear at original size for a fraction of time before starting the grow animation). Is there any workaround for this issue available yet? We are working in SL2. Thank you!
Hi Natascha, sorry you're running into this! We're seeing an issue in Storyline 2 where Grow entrance animations flicker in HTML5, but they work well in Flash. Here's a screen recording that compares the two.
As a workaround, I'd recommend using a different entrance animation--the Shape animation with the Out effect is very similar to Grow.
Thanks again for bringing this up, and I'm sorry it's causing you headaches!
This discussion is closed. You can start a new discussion or contact Articulate Support.