New Tutorial Available: Code View

Jaz

unread,

Dec 18, 2013, 12:18:57 PM12/18/13

to gwd...@googlegroups.com

Hello GWD Community,

We have a new video tutorial ready for you: GWD developer Nivesh Rajbhandari introduces Code View, which takes advantage of some cool CodeMirror 2.0 functionality such as syntax highlighting and code auto-completion. We'll also review how to make some simple edits in code view to pause and play an animation created in Design View.

Check out the video and let us know what you think: Code View

thx
jaz

Jasmine Rogers
Program Manager, GWD

Jonnie Grieve

unread,

Dec 18, 2013, 12:25:38 PM12/18/13

to gwd...@googlegroups.com

I saw the video last night Jaz. I got confused towards the end about how the animation is paused and restarted but that only means I need to rewatch again when I get the chance, (and that I will). It just goes to show that you can not only do cool things in design view but Code view too. If I can teach myself to code better than it'll only make GWD more useful so I'll have to look it more. :)

Jaz

unread,

Dec 18, 2013, 1:27:07 PM12/18/13

to gwd...@googlegroups.com

Sounds good Jonnie and if there is something confusing in the video, please let us know, we can always add to it!

Have an awesome day!

Madina

unread,

Jan 9, 2014, 10:01:52 AM1/9/14

to gwd...@googlegroups.com

Although I'm sure 'code view' is useful, as a 'Designer' / 'Animator' I'd rather not have to manually code simple actions such as 'pause' or 'play'. will these functions be added as an 'Events' option in GWD?

Kevin

unread,

Jan 9, 2014, 11:49:52 AM1/9/14

to gwd...@googlegroups.com

Code View is indispensable as a designer, animator, developer or anyone else that wants full control of their creative. GWD would be completely useless without this. In fact, the code view needs to be improved the most if you ask me. This will make GWD extremely powerful going forward.

Pushkar Joshi

unread,

Jan 9, 2014, 1:22:09 PM1/9/14

to gwd...@googlegroups.com

Hi,

Yes, we are working on improving the events functionality so you will not need to write code for simple actions such as 'pause' and 'play'. Please stay tuned.

- Pushkar Joshi

(GWD Team)

Jonnie Grieve

unread,

Jan 10, 2014, 7:52:10 AM1/10/14

to gwd...@googlegroups.com

Excellent! Best of both worlds, thanks Pushkar. :)

cpbt...@gmail.com

unread,

Feb 20, 2014, 6:43:58 PM2/20/14

to gwd...@googlegroups.com

Hi Jaz,

I am not able to replicate what was done in the tutorial. Below is my code. It appears as though the function is not being seen when I preview the animation. Please help!

- Brandon

<!DOCTYPE html>
<html>

<head data-gwd-animation-mode="quickMode">
<meta name="generator" content="Google Web Designer 1.0.3.0115">
<meta name="template" content="Banner 1.0.5">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
.gwd-page-container {
position: relative;
width: 100%;
height: 100%;
}
.gwd-page-content {
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;
position: absolute;
}
.gwd-page-wrapper {
background-color: rgb(255, 255, 255);
position: absolute;
-webkit-transform: translateZ(0px);
}
.gwd-page-size {
width: 280px;
height: 200px;
}
.gwd-div-l1bx {
position: absolute;
width: 279px;
height: 600px;
background-image: -webkit-linear-gradient(90.56deg, rgb(255, 0, 0) 0%, rgb(0, 75, 255) 50%, rgb(255, 0, 0) 100%);
top: 0px;
left: 0px;
}
.gwd-gen-fknh .gwd-gen-gpzbgwdanimation {
-webkit-animation: gwd-gen-gpzbgwdanimation_animation 4s linear 0s infinite forwards;
}
@-webkit-keyframes gwd-gen-gpzbgwdanimation_animation {
0% {
-webkit-animation-timing-function: linear;
background-image: -webkit-linear-gradient(90.56deg, rgb(255, 0, 0) 0%, rgb(0, 75, 255) 50%, rgb(255, 0, 0) 100%);
top: 0px;
left: 0px;
}
100% {
-webkit-animation-timing-function: linear;
background-image: -webkit-linear-gradient(90.56deg, rgb(255, 0, 0) 0%, rgb(0, 75, 255) 50%, rgb(255, 0, 0) 100%);
top: -300px;
left: 0px;
}
}
.paused-anim {
-webkit-animation-play-state: paused;
}
</style>
<script type="text/x-serialization" id="gwd-serialization">
{
"version": 1,
"content": {
"type": "rad.ad.RichMedia",
"properties": {
"environment": "@environment"
},
"children": [
"@page1"
]
},
"objects": {
"environment": {
"type": "rad.environment.Browser",
"properties": {
"isBanner": true
}
},
"page1": {
"type": "rad.ui.Page",
"decorates": true,
"properties": {
"width": "280px",
"height": "200px",
"introAnimationSequence": "@intropage1"
},
"children": []
},
"intropage1": {
"type": "rad.animation.CSSAnimation",
"properties": {
"cssClass": "gwd-gen-fknh",
"elementCount": 1
}
}
}
}
</script>

<script>
function toggleAnimationState() {
document.getElementById('filmstrip').classList.toggle('paused-anim');
}
</script>

</head>

<body>
<div class="gwd-page-container">
<div id="page1" class="gwd-page-wrapper gwd-page-size" data-gwd-component-id="page1">
<div class="gwd-page-content gwd-page-size">
<div class="gwd-div-l1bx gwd-gen-gpzbgwdanimation paused-anim" id="filmstrip" onclick="toggleAnimationState();"></div>
</div>
</div>
</div>
</body>

</html>

Nivesh Rajbhandari

unread,

Feb 21, 2014, 3:57:14 PM2/21/14

to gwd...@googlegroups.com

Hi Brandon,

Since an ad can have multiple pages (the different states of an ad), the animations in all the pages are "paused" by default. When a page is presented in the ad, a style is dynamically added for that page using JavaScript to trigger the animations within it using a similar approach to the one I used in the tutorial. Instead of using the 'paused' value for that style, GWD uses the 'running' value to trigger the animations:

-webkit-animation-play-state: running;

Since the dynamically added style is specified with two class selectors (.gwd-gen-fknh .gwd-gen-gpzbgwdanimation), it takes precedence over the style in the tutorial that is only using a single class selector (.paused-anim). In order to override that behavior, you have to specify the "-webkit-animation-play-state: paused" with higher CSS specificity. Since id-selectors have higher specificity, try changing:

.paused-anim {
-webkit-animation-play-state: paused;
}

to

#filmstrip.paused-anim {
-webkit-animation-play-state: paused;
}

Thanks,

Nivesh (GWD team)

cpbt...@gmail.com

unread,

Feb 25, 2014, 5:26:13 PM2/25/14

to gwd...@googlegroups.com

Hi Nivesh,

Thank you for your reply. I made the change you suggested above and it still does not work. I removed the "paused-anim" piece from the div class so the animation would run until it is clicked on and it does not stop. Again, here is my code, thanks again for your help! - Brandon

<!DOCTYPE html>
<html>

<head data-gwd-animation-mode="proMode">

.gwd-div-ggl5 {
position: absolute;
background-image: none;
background-color: rgba(250, 255, 0, 0.298039);
top: 0px;
left: 0px;
width: 280px;
height: 400px;
}
.gwd-div-yp94 {
position: absolute;
width: 274px;
height: 50px;
background-image: none;
background-color: rgb(255, 0, 0);
left: 2.9999999999999716px;
top: 0px;
}
.gwd-div-9d89 {
width: 274px;
top: 54px;
background-image: none;
background-color: rgb(128, 255, 0);
}
.gwd-div-pzp8 {
width: 274px;
top: 108px;
background-image: none;
background-color: rgb(0, 0, 255);
}
.gwd-div-a48a {
width: 274px;
top: 162px;
background-image: none;
background-color: rgb(255, 0, 238);
}
.gwd-div-fj0i {
width: 274px;
top: 216px;
background-image: none;
background-color: rgb(255, 132, 0);
}
.gwd-div-p52f {
width: 274px;
top: 270px;
}
.gwd-div-wd2b {
width: 274px;
top: 324px;
}
.gwd-div-4ox9 {
width: 274px;
top: 378px;
}
.gwd-div-r6q1 {
width: 274px;
top: 432px;
}
.gwd-div-5660 {
height: 200px;
}
.gwd-div-f5f1 {
height: 200px;
}
.gwd-gen-1zru .gwd-gen-kjahgwdanimation {
-webkit-animation: gwd-gen-kjahgwdanimation_gwd-keyframes 7s linear 0s infinite forwards;
}
@-webkit-keyframes gwd-gen-kjahgwdanimation_gwd-keyframes {
0% {
top: 0px;
left: 0px;
width: 280px;
height: 400px;
-webkit-animation-timing-function: linear;
}
100% {
top: -270px;
left: 0px;
width: 280px;
height: 400px;
-webkit-animation-timing-function: linear;
}
}
#filmstrip.paused-anim {
-webkit-animation-play-state: paused;
}
</style>
<script>
function toggleAnimationState() {
document.getElementByID('filmstrip').classList.toggle('paused-anim');
}
</script>

"cssClass": "gwd-gen-1zru",
"elementCount": 1

}
}
}
}
</script>
</head>

<body>
<div class="gwd-page-container">

Nivesh Rajbhandari

unread,

Feb 28, 2014, 4:27:49 PM2/28/14

to gwd...@googlegroups.com

Hi Brandon,

You have a typo in your code:

getElementByID

should be

getElementById

-Nivesh

jason.t....@gmail.com

unread,

Mar 1, 2014, 11:58:40 PM3/1/14

to gwd...@googlegroups.com

Wow. I just downloaded this software and am still messing around with it. I am blown away by what all you can do with it. I haven't built a website in about 8 years, so I have a lot of catching up to do. Thanks for the tutorials, they are great.

Jonnie Grieve

unread,

Mar 2, 2014, 12:26:29 PM3/2/14

to gwd...@googlegroups.com

GWD can do some great things, and its all still in BETA so there's more goodness to come. ;)

I look forward to the day we can all try and author some websites from this baby as well as Advertising campaigns.

Jaz

unread,

Mar 3, 2014, 1:43:36 PM3/3/14

to gwd...@googlegroups.com

Hi Jason,

Thanks for downloading and using Google Web Designer! Please be sure to share your feedback here in the forum, we look forward to hearing from you!

cpbt...@gmail.com

unread,

Mar 5, 2014, 5:01:09 PM3/5/14

to gwd...@googlegroups.com

Thank you Nivesh, that fixed the problem! Too many hours spent staring at the code made the easy things hard to spot :)

Keep up the good work with GWD! I am in the process of switching all of my companies Flash ads over to HTML5 with the help of GWD. It is the perfect tool for Flash designers that want to continue to develop on a timeline platform.

Madina

unread,

May 26, 2014, 4:11:04 PM5/26/14

to gwd...@googlegroups.com

Hi Pushkar, any developments on this?

Jaz

unread,

May 27, 2014, 12:28:20 PM5/27/14

to gwd...@googlegroups.com

Hi Madina,

We're working on this now and I'll update the forum, and this post, as soon as we have the release ready!

Reply all

Reply to author

Forward