Changing the position of a image that has keyframes for opacity.

937 views
Skip to first unread message

dar...@storiesonwalls.com

unread,
Jun 29, 2016, 4:08:46 PM6/29/16
to Google Web Designer beta
I have an image which fades in, stays on for a few seconds, then fades out. I created this in Advanced mode using keyframes. There are 4 in total 0% -> 100% -> 100% -> 0%.

All well and good.

However now I want to move the image down a couple of pixels. Note that this is just repositioning of the image, not animating it.

I don't seem to be able move the image over all the keyframes.

I've tried selecting all the keyframes with a shift+click. This turns them yellow but when I make a change to the position (x or y) it either creates a new keyframe where the playhead is and sets the (x,y) for just that keyframe or if the playhead is already over a keyframe it sets the (x,y) for only that individual keyframe.

I've also tried selecting the span on the timeline but get the same result.

Is there a way of selecting an object and changing the (x,y) or another property and have that effect every keyframe of that object?

Or do I have to select each keyframe and set the (x,y) individually?

GWD v1.6.1.0620 on OS X 10.11.5

thanks

-d

Google Web Designer beta

unread,
Jun 29, 2016, 4:29:01 PM6/29/16
to Google Web Designer beta
Hello,

GWD currently doesn't support editing multiple keyframe properties all at once by selecting multiple keyframes and changing properties.
But in your scenario, if the image only has opacity property in four keyframes, you can change the image's position for all keyframes, by selecting the first keyframe and change the image's x,y position from Properties Panel.
You can also just move it with the selection tool at the first keyframe.The opacity animation should retain and also the image's position should be moved throughout the keyframes.

This workaround only works if the keyframes do not have any position property (x,y,z or top/left). To check which property that was added to a keyframe, select a keyframe and right-click for Animated Properties.
There you can also remove a particular property off the keyframe.

I hope this helps,

Thanks,
Mariko - Google Web Designer team

dar...@storiesonwalls.com

unread,
Jun 29, 2016, 5:25:16 PM6/29/16
to Google Web Designer beta
OK, that's a reasonable workaround for now.

Another issue I'm having is with swapping images.

If I swap an image which has the same name as the previous one, it doesn't change. The new file doesn't get copied to the assets folder and it doesn't appear on the stage. Do swapped images have to have different names or is there a trick to this?

Google Web Designer beta

unread,
Jun 30, 2016, 11:57:33 AM6/30/16
to Google Web Designer beta
Hello,

Could you explain what exactly is happening with the swapimage scenario, so that we will know if it is a bug or not?
Does Library update the image correctly in your scenario?
If Library does not update the image correctly, then swapimage won't work either.

Thanks,
Mariko

dar...@storiesonwalls.com

unread,
Jul 4, 2016, 5:58:32 AM7/4/16
to Google Web Designer beta
Background.
I have a set of banners where I've had to create PNG images for the text because of the brand font that needs to be used. The client is tweaking copy, the designer is tweaking kerning / line spacing as such the graphic needs to be replaced.

When exported the new PNG has the same filename as the existing one.

What happens.
I right click on the text PNG in GWD and select Swap Image...

On the library popup I press + to choose the new PNG from my desktop.

I select the image in the file browser and click Open.

The file browser closes but the preview images doesn't update in the library popup. It appears that the existing file is not being overwritten by the new one.

Reply all
Reply to author
Forward
0 new messages