Choppy jerky image transition in Safari

[raydar...@gmail.com]

Hi,

I am scaling and moving an image using keyframes in GWD, it looks like a nice smooth transition when testing in Chrome and Firefox but quite choppy/jerky in Safari.

Any suggestions?

Thanks

[Google Web Designer beta]

Hi,

When you move the image in a keyframe, could you try to use 3D translation tool, instead of just moving it with a selection tool.

That might help to smooth out the animation. You might need to remove top/left properties that are already inserted in keyframes, though.

In order to do that, please click each keyframe and right-click to invoke a context menu. From there, select animated properties.

On the pop-up, please remove top and left properties by clicking them. Then move the image again in a keyframe with using 3D translation tool.

If this doesn't help, please send us your file.

Thanks,

Mariko (GWD team)

[raydar...@gmail.com]

Thanks for your reply Mariko, that did make it slightly better but I got even better results from using Greensock.

I followed the instructions here http://greensock.com/forums/topic/11959-using-gsap-with-google-web-designer-and-3d-assets/ that basically use GWD for importing the images and getting the layout right and then coding the tweening using Greensock timelinelite.

This did bring a new problem that some of my other images (which were logos) appeared to become brighter when the main image was in transition. The remedy was to remove the

-webkit-transform: matrix3d(); From the CSS.

To help others to use Greensock my code looked like this;

<!--link to Greensock Timelinelite .js files from remote sites: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>

//Greensoock code within this function
gwd.animation = function(event) {

var tl = new TimelineLite({onComplete:restart});//make new timeline set function to repeat (loop)
tl.from("#head", .5, {alpha:0});//tween in headline
tl.from("#sub", .5, {alpha:0} ,"+=.3");//tween in subhead .3 after headline
tl.to("#dual", 2, {x:"200", y:"-20", scale:".8"},.5); //move scale main image .5 after start
tl.to("#dual", 2, {x:"137", y:"-20", scale:".65"},"+=2");//move scale main image again 2 secs after
tl.to("#head", .5, {alpha:0});//alpha out headline
tl.to("#sub", .5, {alpha:0} ,"-=.5");//alpha out sub (at same time as headline)
tl.from("#cta", .5, {alpha:0});//alpha in cta
tl.from("#wordmark", .5, {alpha:0} ,"-=.5")//alpha in workmark (at same time as cta)
tl.to("#dual", 2, {x:"0", y:"0", scale:"1"}, "+=2");//move image again after 2 secs
tl.to("#cta", .5, {alpha:0});//alpha out cta
tl.to("#wordmark", .5, {alpha:0} ,"-=.5")//alpha out workmark

function restart(){ TweenLite.delayedCall(.5,function(){tl.restart()}) };//function to loop after .5 sec

};

If you are interested in my files let me know how I can send them to you.

Interested to know if I will run into any problems by removing the -webkit-transform: matrix3d();

Our theory is that Greensock is adding it's own matrix3d?

Thanks
Paul