Animation Flickers in Safari using GotoAndPlay

[SaraP]

Hello,

I am trying to fix a flickering issue seen in Safari Version 9.1.2 (11601.7.7) using GotoAndPlay and GotoAndPlayNTimes. I have tried both of these to loop the animation where the "start" label has been placed. When looping, there is a flicker of the first frame of the animation before it begins from the "start" label. This is not happening in Chrome or Firefox. I have followed the instructions located here: https://support.google.com/webdesigner/answer/6307672?hl=en Please see attached animation for reference. Any insight you have would be appreciated.

[SaraP]

Here is the gwd file for further reference.

[Google Web Designer beta]

Thanks for sending us your source files.

I took a look and it looks like the flickering is happening on Safari when there is the opacity animation at "start" label where animation goes back to loop.

We currently don't have a fix for this issue since we think this is a browser issue, but I have a workaround you can try. 

1) If you remove, opacity:0 (change it to 1) at the first keyframe for both gwd-image_5 and gwd_image_2 layers, it should render correctly on Safari.

2) Instead of using the opacity animations for those two layers, you can add timeline events to control the visibility for gwd-image_5 and gwd_image_2 layers. I modified your file and added those events for reference.

Please take a look at the attached file (test-loop-modified.html) and let me know if that works for you.

Thanks!

Mariko - Google Web Designer team

[SaraP]

Thank you Mariko, it removes the flicker, but this workaround also removes the smooth fade-in transition from frame1 to the "start" label which is something I am trying to achieve, especially with more complicated animations. You mentioned that the flicker is caused by the opacity animation at the "start" label where the animation goes back to loop, so I thought I would try to move the start label a few frames to the right where no animation is occurring, and unfortunately the flicker is still appearing. Is there something else that I can try?

[Google Web Designer beta]

Hi Sara,

I created a new file for you (test-loop-modified2.html) to work-around the issue.

Basically, you can modify your file by following steps

1) Zoom in the timeline 

2) Move the first keyframes (at 0) to 10ms for animated layers. To do so, command select all the first keyframes and move all together to 10ms.

3) Move the playhead back to 0

4) Insert keyframes at 0 for all the animated layers, but the animated properties should match the last keyframe of each layer. For example, gwd-image_6's last keyframe has opacity:0, so need to add opacity:0 at the inserted first keyframe.

5) For each animated layer, add the easing option "step-start" from 0-1 keyframe. Please use the timeline scale option so that it is easy to add easing option between keyframes.

Please let me know if this work-around works for your case on Safari.

Thanks,