Can't reposition object on one layer for all keyframes

[jiggy1965]

So I've done an animation on an object on one layer using several keyframes. Now I wish to reposition that animation from let's say starting from the top right to the bottom left. In other html tools I could just select that layer, reposition the object and the object would do the same animation tweening to several positions, but starting from it's new starting point location.

Not in GWD. I have to reposition the object on each and every keyframe. Calculating it's new x/y coordinates on each keyframe so they match the movement of the original animation.  

What also didn't work is selecting each keyframe while holding shift so that they are all selected and then reposition the object. The objects on the other keyframes wouldn't move along with it.

These kind of things would be very handy for us banner builders. To quickly move or even scale the same object on several keyframes at the same time. Otherwise it would be like doing the same animation over and over again on each banner size. Instead of selecting all objects on the same layer on all keyframes and scaling them to get a 300x250 version out of the 336x280 version.

Can this be fixed in a new update GWD-team?

[Google Web Designer beta]

Hello Jiggy1965

Thank you for posting the issue on the forum.

Currently GWD supports x/y coordinates in keyframes by default settings so, when you create position animation, each keyframe holds translate3d(x,y,z) values.

One workaround I can think of to change the entire position animation is to change top and left positions in the css base style. You can do so by selecting the first keyframe of a layer, then from Properties Panel, change top and/or left values.

Please make sure to use the Properties Panel to move the object, not by actually moving the element on the stage with the selection tool.

This way, the entire position animation should be re-positioned based on the css  base style "top" and/or "left" values.

Same way with scale animation, keyframes hold scale3d property by default, but if you change the Width and Height values in the css base style (by selecting the first keyframe, and change W/H in Properties Panel), you can change the entire scale animation without changing the keyframe x,y,z values.

Additionally, in the upcoming releases, selecting multiple keyframes and editing the properties all at once is allowed. This way, at least you can make bulk changes to multiple keyframes on a same layer.

Hope this helps,

Thanks,

Mariko - Google Web Designer

[johan....@hansoft.com]

In addition to what Mariko wrote, you could also use a wrapper div to be able to quickly re-arrange elements without needing to alter the keyframes.