Codepen
http://codepen.io/tconroy/pen/RPzxgz
基本设置：
我试图创建一个页面，其中包含2列，并位于以中心为基准的容器内，最大宽度为1600px。
左列包含页面内容。右栏包含广告单元（例如，640x480 px宽）。
在768px或更低的媒体断点处，2个列应堆叠（使内容在上面，广告在下面）。
问题
当页面加载时，应该有一个400x400像素的画布元素，其中心是居中的白色圆形。
圆形动画到直接位于左侧列内容后面的位置。
之后，圆形应该“扩展”以填充整个用户的视口，而不会覆盖内容或导致滚动条出现。
正如下面的fiddle所示，我已经让初始圆形/移动动画工作了，但是在尝试解决扩展部分时遇到了问题。我需要圆形看起来增长/扩展，直到覆盖整个视口，但所有文本内容/广告单元都不应该被遮挡并且不会因动画而出现滚动条。
我对canvas完全不熟悉，因此如果有人可以在不破坏初始动画的情况下帮我解决这个问题，我将不胜感激。 :)
http://codepen.io/tconroy/pen/RPzxgz
HTML:
<div class="container">
<div class="navigation row">
<h1 style="float:right;"><a href="#">Continue</a></h1>
</div>
<div class="content row">
<div class="circle-wrap">
<canvas class="circle" width="400" height="400"></canvas>
<div class="template-output">
<h1 class="title">
<span class="upper">Title TopLine</span>
<span class="lower">Title Bottom</span>
</h1>
<div class="body">
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum distinctio nesciunt nostrum magni neque. Iusto et delectus iure distinctio cupiditate, a sint doloremque ratione saepe sunt quisquam assumenda, eaque velit?</p>
<p class="byline">- Author Name</p>
</div>
</div>
</div>
</div>
<div class="ads row">
<figure class="ad">
<figcaption>Advertisement</figcaption>
<div id="welcome"></div>
</figure>
</div>
</div>
</div>
CSS（层叠样式表）：
/* BASE STYLES */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
background: gray;
overflow: hidden;
}
/* END BASE STYLES */
/* LAYOUT */
.container {
width: 100%;
height: 100%;
max-width: 1600px;
margin: 0 auto;
outline: 1px solid black;
}
.row {
width: 50%;
height: 100%;
float: left;
display: block;
}
.row.content {
border: 1px solid blue;
}
.row.ads {
border: 1px solid red;
}
.row.navigation {
width: 100%;
height: auto;
}
@media screen and (max-width: 768px) {
.row {
width: 100%;
height: auto;
}
}
/* END LAYOUT STYLES */
/* ADVERTISEMENT */
.ad {
display: table;
margin: 0 auto;
}
.ad figcaption {
text-align: center;
margin: 0 auto;
}
.ad #welcome {
outline: 1px solid black;
background: darkgray;
width: 640px;
height: 480px;
margin: 0 auto;
}
/* END ADVERTISEMENT STYLES */
/* CONTENT */
.content {
min-height: 400px;
}
.content .template-output {
width: 400px;
position: relative;
}
.content .template-output .title {
font-size: 4em;
}
.content .template-output .title span {
display: block;
text-transform: uppercase;
}
.content .template-output .title .upper {
text-align: left;
}
.content .template-output .title .lower {
text-align: right;
}
.content .template-output .body {
position: relative;
}
.content .circle-wrap {
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
}
.content .circle-wrap .circle {
width: 400px;
height: 400px;
outline: 1px solid black;
position: absolute;
left: 0;
top: 0;
transform: translate(0%, 0%);
}
.content .circle-2 {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
/* END CONTENT STYLES */
JAVASCRIPT（包括：jQuery和GSAP TweenMax库）
/*
I have successfully created the canvas element in the center
of the screen and animate it to the left column. Now, I want the circle to "expand" behind the content, and fill the entire viewport.
It should not cause scrollbars to appear or cover the text content.
*/
(function () {
var tl = new TimelineMax();
var $canvas = $('.circle'),
$canvas_wrap = $('.circle-wrap'),
canvas = $canvas[0],
context = canvas.getContext('2d'),
canvas_width = canvas.width,
canvas_height = canvas.height;
context.globalCompositeOperation='destination-over';
draw(context);
/* TIMELINE STUFF */
var canvas_opts = {
'center-to-destination': {
xPercent: -50,
yPercent: -50,
top: '50%',
left: '100%',
delay: 1.5
}
};
tl.from(canvas, 1, canvas_opts['center-to-destination']);
})();