Edit multiples keyframes?

[willia...@maqina.com.br]

In Adobe Flash and anothers softwares of edition, we can edit a multiple frames(keyframes) at same time.
How we do that in Google Web Designer?

Ty

[Google Web Designer beta]

Hello,

GWD allows to edit multiple keyframes across the layers, but not on the same layer.

If you shift select keyframes in different layers or select multiple elements on the stage, then change color, positions, etc... then you should be able to edit multiple keyframes all together at once.

For a single element with multiple keyframes, GWD does not allow editing multiple keyframes all at once.

Thanks,

Mariko (GWD team)

[andrea...@gmail.com]

Hi,
I made an ad in 300x250. Now I need the same ad in 250x250. So I duplicated the file, changed the dimensions to 250x250 and now I have to match the animations to the smaller stage.

The easiest way would be to mark all keyframes of a selected layer and reposition everything 40px to the right. But now you are saying I can't edit multiple keyframes on a single layer, so I have to edit every keyframe on its own??

Or is there another (better) workaround?
(I have some more alternative dimensions left)

thanks
andy

[Google Web Designer beta]

Hi Andy,

One way you can try is that after making a duplicate, select the very first keyframe and change only left and top values from Properties Panel.

This should move the element position for all the keyframes. But this only works if keyframed properties don't include left and top values. (like an example in the following code)

Changing the first keyframe in Timeline should affect the element's base style in css.

For example, if my basic animation looks like the following css, which changes opacity and position(translate3d) and scale,

    .gwd-img-18qc {

      position: absolute;

      width: 116px;

      height: 92px;

      transform-origin: 58px 45.82px 0px;

      left: 90px;

      top: 81px;

      opacity: 0;

      transform-style: preserve-3d;

      transform: scale3d(1, 1, 1);

    }

    @keyframes gwd-gen-oo5fgwdanimation_gwd-keyframes {

      0% {

        opacity: 0;

        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);

        animation-timing-function: linear;

      }

      26.89% {

        opacity: 1;

        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);

        animation-timing-function: linear;

      }

      51.76% {

        opacity: 1;

        transform: translate3d(0px, 0px, 0px) scale3d(1.91304, 1.91304, 1);

        animation-timing-function: linear;

      }

      73.11% {

        opacity: 1;

        transform: translate3d(-153px, 0px, 0px) scale3d(1.91304, 1.91304, 1);

        animation-timing-function: linear;

      }

      100% {

        opacity: 1;

        transform: translate3d(1px, 0px, 0px) scale3d(1.91304, 1.91304, 1);

        animation-timing-function: linear;

      }

    }

In this case, if you select the first keyframe in Timeline, change 'top' and 'left' properties, the whole animation should move all together.

Could you let me know if this work-around works?

We are working on the feature to modify multiple keyframes at once.

Thanks,

Mariko - Google Web Designer team

[csta...@aristotleweb.com]

GWD Team,

I hope that this gets incorporated into GWD soon. As the previous comments in this thread indicate, we often are adapting versions of banners at different sizes, and it is laborious to have to edit position values at every keyframe.

Thanks,
Christopher

[San Khong]

Hi Christopher,

You should be able to select multiple keyframes and edit them at the same time now in the latest build (1.9.0.0619). You can also drag to select the keyframes (marquee select). Can you please give it a try and let us know if the editing multiple keyframes works for your workflow of updating the banner for different sizes?

Thanks,

San

Google Web Designer team

[csta...@aristotleweb.com]

San,

Your response is much appreciated. I’m happy to confirm that the latest build has solved this as you said. I can confirm that I both physically moved the asset on canvas having selected the multiple frames in the timeline as well as entering a translation value to reposition. So,both techniques worked to globally reposition.

For what it’s worth, I just tried to select multiple frames and do an opacity change to all at the same time which also worked perfectly. I further tried scaling over multiple frames at the same time, which worked as well.

Thanks for addressing this. It will be very helpful in my workflow.

Best, Christopher