how to stretch the time in google web designer

[yasmineva...@hotmail.com]

I would like to stretch the time. The whole add I made is to fast and don't want to adjust every keyframe by keyframe separately. Couldn't find anything on youtube or the forum.

thanks

[bruce....@gmail.com]

Yes, I would like to know how to insert time as well

[Google Web Designer beta]

Hi,

Thank you for using Google Web Designer.

Currently, GWD does not support any UI to change the time for keyframes or animation spans.

I would like to add the feature request though, so could you explain in a little more detail how stretching the time or entering time you would like to see in timeline UI?

One workaround would be to open Code View, locate the animation class, such as following

#banner-page.gwd-play-animation .gwd-gen-1035gwdanimation {

      animation: gwd-gen-1035gwdanimation_gwd-keyframes 2s linear 0s 1 normal forwards;

    }

// This is the keyframe rule for the above animation properties //

@keyframes gwd-gen-1035gwdanimation_gwd-keyframes {

      0% {

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

        animation-timing-function: linear;

        background-color: rgb(110, 136, 106);

      }

      25% {

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

        animation-timing-function: linear;

        background-color: rgb(117, 137, 100);

      }

      50% {

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

        animation-timing-function: linear;

        background-color: rgb(124, 138, 94);

      }

      70% {

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

        animation-timing-function: linear;

        background-color: rgb(129, 138, 89);

      }

      100% {

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

        animation-timing-function: linear;

        background-color: rgb(137, 139, 81);

      }

    }

 

Then change the animation duration (e.g. from 2s to 4s in this example)

 animation: gwd-gen-1035gwdanimation_gwd-keyframes 2s

This way, total animation duration for the layer is changed and all the associated keyframes are adjusted accordingly.

Please let me know if you have more questions,

Thanks,

Mariko (GWD team)