I'm doing a banner with two frames which have got a recursive link to another frame and vice versa.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="Google Web Designer 1.5.4.0113">
<meta data-template-name="gwd-300x250_BANNER_SUPER">
<meta name="template" content="Banner 2.3.2">
<meta name="environment" content="gwd-doubleclick">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css" id="gwd-lightbox-style">
.gwd-lightbox {
overflow: hidden;
}
</style>
<style type="text/css" id="gwd-text-style">
h1 {
margin: 0px;
}
h2 {
margin: 0px;
}
h3 {
margin: 0px;
}
</style>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
.gwd-page-container {
position: relative;
width: 100%;
height: 100%;
}
.gwd-page-content {
transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform-style: preserve-3d;
position: absolute;
background-color: transparent;
}
.gwd-page-wrapper {
position: absolute;
transform: translateZ(0px);
background-color: rgb(255, 255, 255);
}
.gwd-page-size {
width: 300px;
height: 250px;
}
.gwd-page-wrapper {}.gwd-page-wrapper {}.gwd-page-wrapper {}[data-gwd-group="LOGO"] .gwd-grp-qagq.gwd-canvas-hot0 {
position: absolute;
width: 300px;
height: 45px;
left: 0px;
transform-style: preserve-3d;
top: 0px;
transform: translate3d(0px, 0px, 0px);
}
[data-gwd-group="LOGO"] .gwd-grp-qagq.gwd-img-1o5k {
position: absolute;
left: 56px;
top: 58px;
width: 150px;
height: 18.22px;
transform: translate3d(19px, -3px, 0px);
transform-style: preserve-3d;
opacity: 0;
}
[data-gwd-group="LOGO"] .gwd-grp-qagq.gwd-img-33fp {
position: absolute;
left: 115px;
top: 83px;
width: 70px;
height: 39.29px;
transform-style: preserve-3d;
opacity: 0;
transform: translate3d(0px, -9px, 0px);
}
[data-gwd-group="LOGO"] {
width: 300px;
height: 113.281px;
}
.gwd-div-1v21 {
position: absolute;
left: 0px;
top: -47px;
}
.gwd-play-animation [data-gwd-group="LOGO"] .gwd-gen-16jcgwdanimation {
animation: gwd-gen-16jcgwdanimation_gwd-keyframes 0.6s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-apeegwdanimation_gwd-keyframes {
0% {
opacity: 0;
animation-timing-function: linear;
}
100% {
opacity: 1;
animation-timing-function: linear;
}
}
.gwd-play-animation [data-gwd-group="LOGO"] .gwd-gen-apeegwdanimation {
animation: gwd-gen-apeegwdanimation_gwd-keyframes 0.4s linear 0.6s 1 normal forwards;
}
.gwd-play-animation [data-gwd-group="LOGO"] .gwd-gen-e8a7gwdanimation {
animation: gwd-gen-e8a7gwdanimation_gwd-keyframes 0.4s linear 0.6s 1 normal forwards;
}
.gwd-page-wrapper {}@keyframes gwd-empty-animation {
0% {
opacity: 0.001;
}
100% {
opacity: 0;
}
}
@keyframes gwd-empty-animation-PASO_INCIO {
0% {
opacity: 0.001;
}
100% {
opacity: 0;
}
}
.gwd-page-wrapper {}.gwd-page-wrapper {}@keyframes gwd-empty-animation-PASO_4 {
0% {
opacity: 0.001;
}
100% {
opacity: 0;
}
}
@keyframes gwd-empty-animation-PASO_FRAME_3 {
0% {
opacity: 0.001;
}
100% {
opacity: 0;
}
}
.gwd-page-wrapper {}@keyframes gwd-empty-animation-PASO_INICIO {
0% {
opacity: 0.001;
}
100% {
opacity: 0;
}
}
.gwd-div-5mmz {
background-image: none;
background-color: rgb(145, 132, 190);
}
.gwd-taparea-1jxh {
position: absolute;
transform-style: preserve-3d;
left: 1px;
top: 0px;
width: 299px;
height: 250px;
transform-origin: 149.5px 125px 0px;
}
.gwd-page-wrapper {
background-image: none;
}
#page1.gwd-play-animation .event-1-animation {
animation: gwd-empty-animation 2.5s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-16jcgwdanimation_gwd-keyframes {
0% {
transform: translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}
100% {
transform: translate3d(0px, 48px, 0px);
animation-timing-function: linear;
}
}
@keyframes gwd-gen-e8a7gwdanimation_gwd-keyframes {
0% {
opacity: 0;
transform: translate3d(0px, -9px, 0px);
animation-timing-function: linear;
}
100% {
opacity: 1;
transform: translate3d(0px, -9px, 0px);
animation-timing-function: linear;
}
}
.gwd-div-1bzl {
position: absolute;
left: 0px;
top: 1px;
}
[data-gwd-group="LOGOESTATICO"] .gwd-grp-1ted.gwd-canvas-hot0 {
position: absolute;
width: 300px;
height: 45px;
left: 0px;
transform-style: preserve-3d;
transform: translate3d(0px, 48px, 0px);
top: -48px;
}
[data-gwd-group="LOGOESTATICO"] .gwd-grp-1ted.gwd-img-1o5k {
position: absolute;
left: 56px;
width: 150px;
height: 18.22px;
transform: translate3d(19px, -3px, 0px);
transform-style: preserve-3d;
opacity: 1;
top: 10px;
}
[data-gwd-group="LOGOESTATICO"] .gwd-grp-1ted.gwd-img-33fp {
position: absolute;
left: 115px;
width: 70px;
height: 39.29px;
transform-style: preserve-3d;
opacity: 1;
transform: translate3d(0px, -9px, 0px);
top: 35px;
}
[data-gwd-group="LOGOESTATICO"] {
width: 300px;
height: 65.2812px;
}
.gwd-div-mslk {
background-image: none;
background-color: rgb(255, 255, 255);
}
.gwd-div-16kr {
background-image: none;
background-color: rgb(255, 255, 255);
}
.gwd-taparea-1khc {
left: 1px;
top: 0px;
background-image: none;
}
.gwd-taparea-kgzh {
background-image: none;
}
.gwd-img-k1j6 {
position: absolute;
width: 164px;
height: 183px;
left: 71px;
top: 59px;
opacity: 0;
}
.gwd-img-1gl8 {
position: absolute;
width: 22px;
height: 205px;
left: -1px;
top: 20px;
opacity: 1;
}
.gwd-img-mmk1 {
position: absolute;
width: 130px;
height: 82px;
left: 32px;
top: 121px;
opacity: 0;
}
.gwd-img-b9sm {
position: absolute;
width: 22px;
height: 205px;
left: -1px;
top: 20px;
opacity: 1;
}
.gwd-img-1v7n {
position: absolute;
width: 121px;
height: 130px;
left: 168px;
top: 75px;
opacity: 0;
}
.gwd-img-1re7 {
position: absolute;
width: 77px;
height: 76px;
left: 32px;
top: 57px;
opacity: 0;
}
.gwd-img-1r3q {
position: absolute;
width: 300px;
height: 39px;
left: 0px;
top: 211px;
opacity: 0;
}
@keyframes gwd-gen-1boggwdanimation_gwd-keyframes {
0% {
opacity: 0;
animation-timing-function: linear;
}
100% {
opacity: 1;
animation-timing-function: linear;
}
}
@keyframes gwd-gen-e1ntgwdanimation_gwd-keyframes {
0% {
opacity: 0;
animation-timing-function: linear;
}
100% {
opacity: 1;
animation-timing-function: linear;
}
}
@keyframes gwd-gen-1x4igwdanimation_gwd-keyframes {
0% {
opacity: 0;
animation-timing-function: linear;
}
100% {
opacity: 1;
animation-timing-function: linear;
}
}
.gwd-img-2qf4 {
position: absolute;
width: 300px;
height: 250px;
top: 0px;
left: 0px;
}
.gwd-img-1o6n {
position: absolute;
width: 300px;
height: 250px;
left: 0px;
top: 0px;
}
#page1_1.gwd-play-animation .event-2-animation {
animation: gwd-empty-animation 4s linear 0s 1 normal forwards;
}
#page1_1.gwd-play-animation .gwd-gen-1vr9gwdanimation {
animation: gwd-gen-1vr9gwdanimation_gwd-keyframes 4s linear 0s 1 normal forwards;
}
#page1_1.gwd-play-animation .gwd-gen-1boggwdanimation {
animation: gwd-gen-1boggwdanimation_gwd-keyframes 0.5s linear 0s 1 normal forwards;
}
#page1_1.gwd-play-animation .gwd-gen-e1ntgwdanimation {
animation: gwd-gen-e1ntgwdanimation_gwd-keyframes 0.5s linear 0.5s 1 normal forwards;
}
#page1_1.gwd-play-animation .gwd-gen-1x4igwdanimation {
animation: gwd-gen-1x4igwdanimation_gwd-keyframes 0.5s linear 1s 1 normal forwards;
}
@keyframes gwd-gen-l7pggwdanimation_gwd-keyframes {
0% {
opacity: 0;
animation-timing-function: linear;
}
100% {
opacity: 1;
animation-timing-function: linear;
}
}
@keyframes gwd-gen-1vr9gwdanimation_gwd-keyframes {
0% {
opacity: 0;
animation-timing-function: linear;
}
12.5% {
opacity: 1;
animation-timing-function: linear;
}
25% {
opacity: 0;
animation-timing-function: linear;
}
37.5% {
opacity: 1;
animation-timing-function: linear;
}
50% {
opacity: 0;
animation-timing-function: linear;
}
62.5% {
opacity: 1;
animation-timing-function: linear;
}
75% {
opacity: 0;
animation-timing-function: linear;
}
87.5% {
opacity: 1;
animation-timing-function: linear;
}
100% {
opacity: 0;
animation-timing-function: linear;
}
}
#page1_1.gwd-play-animation .gwd-gen-1i3ugwdanimation {
animation: gwd-gen-1i3ugwdanimation_gwd-keyframes 2s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-1i3ugwdanimation_gwd-keyframes {
0% {
opacity: 1;
animation-timing-function: linear;
}
100% {
opacity: 1;
animation-timing-function: linear;
}
}
#page1.gwd-play-animation .gwd-gen-l7pggwdanimation {
animation: gwd-gen-l7pggwdanimation_gwd-keyframes 1s linear 0s 1 normal forwards;
}
@keyframes gwd-gen-1gefgwdanimation_gwd-keyframes {
0% {
opacity: 1;
animation-timing-function: linear;
}
60% {
opacity: 1;
animation-timing-function: linear;
}
100% {
opacity: 1;
animation-timing-function: linear;
}
}
#page1.gwd-play-animation .gwd-gen-1gefgwdanimation {
animation: gwd-gen-1gefgwdanimation_gwd-keyframes 2.5s linear 0s 1 normal forwards;
}
</style>
<link href="gwdpage_style.css" data-version="8" data-exports-type="gwd-page" rel="stylesheet">
<link href="gwdtaparea_style.css" data-version="4" data-exports-type="gwd-taparea" rel="stylesheet">
<link href="gwdimage_style.css" data-version="7" data-exports-type="gwd-image" rel="stylesheet">
<link href="gwddoubleclick_style.css" data-version="10" data-exports-type="gwd-doubleclick" rel="stylesheet">
<link href="gwdpagedeck_style.css" data-version="8" data-exports-type="gwd-pagedeck" rel="stylesheet">
<script data-source="googbase_min.js" data-version="3" data-exports-type="googbase" type="text/javascript" src="googbase_min.js"></script>
<script data-source="gwd_webcomponents_min.js" data-version="4" data-exports-type="gwd_webcomponents" type="text/javascript" src="gwd_webcomponents_min.js"></script>
<script data-source="gwdpage_min.js" data-version="8" data-exports-type="gwd-page" type="text/javascript" src="gwdpage_min.js"></script>
<script data-source="gwdpagedeck_min.js" data-version="8" data-exports-type="gwd-pagedeck" type="text/javascript" src="gwdpagedeck_min.js"></script>
<script data-source="gwddoubleclick_min.js" data-version="10" data-exports-type="gwd-doubleclick" type="text/javascript" src="gwddoubleclick_min.js"></script>
<script data-source="gwdimage_min.js" data-version="7" data-exports-type="gwd-image" type="text/javascript" src="gwdimage_min.js"></script>
<script data-source="gwdrectangle_min.js" data-version="3" data-exports-type="gwd-rectangle" type="text/javascript" src="gwdrectangle_min.js"></script>
<script type="text/javascript" src="groups_runtime.min.1.0.js" gwd-groups-version="1.0"></script>
<script type="text/javascript" src="gwdid.min.1.0.js" gwd-gwdid-version="1.0"></script>
<script type="text/javascript" gwd-events="support" src="gwd-events-support.1.0.js"></script>
<script type="text/javascript" gwd-events="handlers">
gwd.auto_Gwd_taparea_1Action = function(event) {
// GWD Predefined Function
};
gwd.auto_Page1Event_1 = function(event) {
// GWD Predefined Function
gwd.actions.gwdPagedeck.goToPage('pagedeck', 'page1_1', 'fade', 500, 'linear', 'top');
};
gwd.auto_Page1_1Event_2 = function(event) {
// GWD Predefined Function
gwd.actions.gwdPagedeck.goToPage('pagedeck', 'page1', 'fade', 500, 'linear', 'top');
};
gwd.auto_Gwd_taparea_2Action = function(event) {
// GWD Predefined Function
};
</script>
<script type="text/javascript" gwd-events="registration">
// Código de soporte para la administración de eventos en Google Web Designer
// Este bloqueo de la secuencia de comandos se genera automáticamente. No lo edite.
gwd.actions.events.registerEventHandlers = function(event) {
gwd.actions.events.addHandler('gwd-taparea_1', 'action', gwd.auto_Gwd_taparea_1Action, false);
gwd.actions.events.addHandler('page1', 'event-1', gwd.auto_Page1Event_1, false);
gwd.actions.events.addHandler('page1_1', 'event-2', gwd.auto_Page1_1Event_2, false);
gwd.actions.events.addHandler('gwd-taparea_2', 'action', gwd.auto_Gwd_taparea_2Action, false);
gwd.actions.timeline.captureAnimationEnd(document.body);
};
gwd.actions.events.deregisterEventHandlers = function(event) {
gwd.actions.events.removeHandler('gwd-taparea_1', 'action', gwd.auto_Gwd_taparea_1Action, false);
gwd.actions.events.removeHandler('page1', 'event-1', gwd.auto_Page1Event_1, false);
gwd.actions.events.removeHandler('page1_1', 'event-2', gwd.auto_Page1_1Event_2, false);
gwd.actions.events.removeHandler('gwd-taparea_2', 'action', gwd.auto_Gwd_taparea_2Action, false);
gwd.actions.timeline.releaseAnimationEnd(document.body);
};
document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
</script>
<script data-source="gwdtaparea_min.js" data-version="4" data-exports-type="gwd-taparea" type="text/javascript" src="gwdtaparea_min.js"></script>
</head>
<body>
<template id="gwd-group-definitions">
<div data-gwd-group-def="LOGO" data-gwd-group-class="gwd-grp-qagq" style="display: none;">
<canvas is="gwd-rectangle" width="300" height="45" class="gwd-canvas-hot0 gwd-grp-qagq gwd-gen-16jcgwdanimation" x-off="0" y-off="0" stroke-width="1" stroke-color="[0.9490196078431372,0.9490196078431372,0.9490196078431372,1]" fill-color="[0.9490196078431372,0.9490196078431372,0.9490196078431372,1]"
tl-radius="0" tr-radius="0" bl-radius="0" br-radius="0" stroke-style="Solid" data-gwd-grp-id="LOGO_RECTANGULO" data-gwd-tl-locked=""></canvas>
<img is="gwd-image" source="assets/LOGO_COMPOSICION_animado/LOGO_SUPERMERCADO_TRANSPARENTE_400x400.gif" class="gwd-img-1o5k gwd-grp-qagq gwd-gen-apeegwdanimation" data-gwd-grp-id="LOGO_SUPERMECADO">
<img is="gwd-image" source="assets/LOGO_COMPOSICION_animado/LOGO_TRIANGULO_TRANSPARENTE_400x400.gif" class="gwd-img-33fp gwd-grp-qagq gwd-gen-e8a7gwdanimation" data-gwd-grp-id="LOGO_ECI" data-gwd-tl-locked="">
</div>
<div data-gwd-group-def="LOGOESTATICO" data-gwd-group-class="gwd-grp-1ted" style="display: none;">
<canvas is="gwd-rectangle" width="300" height="45" class="gwd-canvas-hot0 gwd-grp-1ted" x-off="0" y-off="0" stroke-width="1" stroke-color="[0.9490196078431372,0.9490196078431372,0.9490196078431372,1]" fill-color="[0.9490196078431372,0.9490196078431372,0.9490196078431372,1]"
tl-radius="0" tr-radius="0" bl-radius="0" br-radius="0" stroke-style="Solid" data-gwd-grp-id="LOGO_RECTANGULO_1" data-gwd-tl-locked="" style=""></canvas>
<img is="gwd-image" source="assets/LOGO_COMPOSICION_animado/LOGO_SUPERMERCADO_TRANSPARENTE_400x400.gif" class="gwd-img-1o5k gwd-grp-1ted" data-gwd-grp-id="LOGO_SUPERMECADO_1" style="">
<img is="gwd-image" source="assets/LOGO_COMPOSICION_animado/LOGO_TRIANGULO_TRANSPARENTE_400x400.gif" class="gwd-img-33fp gwd-grp-1ted" data-gwd-grp-id="LOGO_ECI_1" data-gwd-tl-locked="" style="">
</div>
</template>
<gwd-doubleclick id="gwd-ad" polite-load="">
<gwd-metric-configuration>
<gwd-metric-event source="gwd-taparea_1" event="tapareaexit" metric=""></gwd-metric-event>
<gwd-metric-event source="gwd-taparea_2" event="tapareaexit" metric=""></gwd-metric-event>
<gwd-metric-event source="gwd-taparea_1" event="tapareaexit" metric="" exit="Exit"></gwd-metric-event>
<gwd-metric-event source="gwd-taparea_2" event="tapareaexit" metric="" exit="Exit"></gwd-metric-event>
</gwd-metric-configuration>
<div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck">
<div is="gwd-page" id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox gwd-div-5mmz gwd-div-mslk" data-gwd-width="300px" data-gwd-height="250px" data-gwd-name="FRAME_1">
<div class="gwd-page-content gwd-page-size">
<img is="gwd-image" source="assets/f.png" id="gwd-image_10" class="gwd-img-2qf4">
<div class="gwd-animation-event event-1-animation" data-event-name="event-1" data-event-time="2500" style=""></div>
<img is="gwd-image" source="assets/6.png" id="gwd-image_4" class="gwd-img-1gl8 gwd-gen-1gefgwdanimation">
<img is="gwd-image" source="assets/50%grande_300x250.png" id="gwd-image_3" class="gwd-img-k1j6 gwd-gen-l7pggwdanimation">
<div class="gwd-div-1v21" data-gwd-group="LOGO" id="LOGO_CABECERA" style=""></div>
<gwd-taparea id="gwd-taparea_1" class="gwd-taparea-1jxh gwd-taparea-kgzh"></gwd-taparea>
</div>
</div>
<div is="gwd-page" id="page1_1" class="gwd-page-wrapper gwd-page-size gwd-lightbox gwd-div-5mmz gwd-div-16kr" data-gwd-width="300px" data-gwd-height="250px" data-gwd-name="FRAME_2">
<div class="gwd-page-content gwd-page-size">
<img is="gwd-image" source="assets/f.png" id="gwd-image_11" class="gwd-img-1o6n">
<img is="gwd-image" source="assets/6.png" id="gwd-image_6" class="gwd-img-b9sm gwd-gen-1i3ugwdanimation">
<div data-gwd-group="LOGOESTATICO" class="gwd-div-1bzl" id="LOGO_ESTATICO" style=""></div>
<img is="gwd-image" source="assets/producto_300x250.png" id="gwd-image_5" class="gwd-img-mmk1 gwd-gen-1boggwdanimation">
<img is="gwd-image" source="assets/300x250_precio_1.png" id="gwd-image_7" class="gwd-img-1v7n gwd-gen-e1ntgwdanimation">
<img is="gwd-image" source="assets/50%_300x250.png" id="gwd-image_8" class="gwd-img-1re7 gwd-gen-1x4igwdanimation">
<img is="gwd-image" source="assets/9.jpg" id="gwd-image_9" class="gwd-img-1r3q gwd-gen-1vr9gwdanimation" data-gwd-tl-hidden="">
<gwd-taparea id="gwd-taparea_2" class="gwd-taparea-1jxh gwd-taparea-1khc"></gwd-taparea>
<div class="gwd-animation-event event-2-animation" data-event-name="event-2" data-event-time="4000"></div>
</div>
</div>
</div>
</gwd-doubleclick>
<script type="text/javascript" id="gwd-init-code">
(function() {
var gwdAd = document.getElementById('gwd-ad');
/**
* Handles the DOMContentLoaded event. The DOMContentLoaded event is
* fired when the document has been completely loaded and parsed.
*/
function handleDomContentLoaded(event) {
}
/**
* Handles the WebComponentsReady event. This event is fired when all
* custom elements have been registered and upgraded.
*/
function handleWebComponentsReady(event) {
// Start the Ad lifecycle.
setTimeout(function() {
gwdAd.initAd();
}, 0);
}
/**
* Handles the event that is dispatched after the Ad has been
* initialized and before the default page of the Ad is shown.
*/
function handleAdInitialized(event) {}
window.addEventListener('DOMContentLoaded',
handleDomContentLoaded, false);
window.addEventListener('WebComponentsReady',
handleWebComponentsReady, false);
window.addEventListener('adinitialized',
handleAdInitialized, false);
})();
</script>
</body>
</html>