How to move codes from a google web designer to an other html file?

manolhs...@gmail.com

unread,

Oct 17, 2013, 7:26:14 AM10/17/13

to gwd...@googlegroups.com

i got this animation and i would like to move it to an html other file? how do i get the code from it but not the place.
I mean in google web designer if i just simply copy/paste the code into the html file it takes the position from where the animation is but i dont want the position.

I just want to take the animation and put for example in a logo to make the move.

Here is the code

<!DOCTYPE html>
<html>

<head data-gwd-animation-mode="quickMode">
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="Google Web Designer 1.0.0.924">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
body {
background-color: transparent;
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
}
.gwd-div-blmf {
position: absolute;
width: 236px;
height: 106px;
left: 58px;
top: 59px;
-webkit-transform: matrix3d(-0.9999654094, 0.0083174554, 0, 0, -0.0083174554, -0.9999654094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
background-image: none;
background-color: rgb(0, 0, 0);
}
.gwd-gen-6k9fgwdanimation {
-webkit-animation: gwd-gen-6k9fgwdanimation_animation 2s linear 0s 1 forwards;
}
@-webkit-keyframes gwd-gen-6k9fgwdanimation_animation {
0% {
-webkit-animation-timing-function: linear;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
background-color: rgb(0, 0, 0);
}
50% {
-webkit-animation-timing-function: linear;
-webkit-transform: matrix3d(-0.1873730146, 0.982288834, 0, 0, -0.982288834, -0.1873730146, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
background-color: rgb(135, 153, 0);
}
100% {
-webkit-animation-timing-function: linear;
-webkit-transform: matrix3d(-0.9999654094, 0.0083174554, 0, 0, -0.0083174554, -0.9999654094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
background-color: rgb(0, 0, 0);
}
}
</style>
</head>

<body>
<div class="gwd-div-blmf gwd-gen-6k9fgwdanimation"></div>
</body>

</html>

And here is my html file:

<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>

just tell me what css i should just take from google web designer to the class of .logo

Jonnie Grieve

unread,

Oct 17, 2013, 7:57:24 AM10/17/13

to gwd...@googlegroups.com

It looks like you need all of it, with the exception of maybe the page (body) styles. But you'd also need styles for placement depending on where you want to paste it onto your page.

Nivesh Rajbhandari

unread,

Oct 17, 2013, 5:23:59 PM10/17/13

to gwd...@googlegroups.com

Hi,

You will need to add the CSS classes to your logo div:

<div class="logo gwd-div-blmf gwd-gen-6k9fgwdanimation"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>

And you will need to copy at least this subset of the styles generated in GWD into a style element in the head of your other HTML file. I have removed the dimensions and position styles from this too:

-webkit-transform: matrix3d(-0.9999654094, 0.0083174554, 0, 0, -0.0083174554, -0.9999654094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;

background-color: rgb(0, 0, 0);
}
.gwd-gen-6k9fgwdanimation {
-webkit-animation: gwd-gen-6k9fgwdanimation_animation 2s linear 0s 1 forwards;
}
@-webkit-keyframes gwd-gen-6k9fgwdanimation_animation {
0% {
-webkit-animation-timing-function: linear;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
background-color: rgb(0, 0, 0);
}
50% {
-webkit-animation-timing-function: linear;
-webkit-transform: matrix3d(-0.1873730146, 0.982288834, 0, 0, -0.982288834, -0.1873730146, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
background-color: rgb(135, 153, 0);
}
100% {
-webkit-animation-timing-function: linear;
-webkit-transform: matrix3d(-0.9999654094, 0.0083174554, 0, 0, -0.0083174554, -0.9999654094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
background-color: rgb(0, 0, 0);
}
}
</style>

However, note that you will need to add the vendor prefixes for the other browsers if you need this to work in non-webkit browsers. This is something GWD does for you when you Publish your content.