Canvas circle animation - how to expand to fill the entire viewport?

Question

Codepen

http://codepen.io/tconroy/pen/RPzxgz

Basic setting:

I am trying to create a page structured with two columns inside a centered container, with a maximum of 1600 pixels wide.

The left column contains the contents of the page. The right column contains the ad unit (say, 640x480 pixels wide).

At 768px or a lower breakpoint, your library must have 2 columns stacked (for content to be on top and ads below).

Problem

When the page loads, there should be a 400x400 pixel canvas element containing a white circle in the center of the screen (the absolute center is vertical and horizontal).

The circle moves to the position immediately behind the contents of the left column.

After that, the circle should “expand” to fill the entire user viewport without closing the content or causing the appearance of scroll bars.

As shown in my script below, I got the initial loop / movement animation, but I ran into problems trying to figure out part of the extension. I need a circle so that it grows / expands until it covers the entire viewport, but the entire text content / ad unit should not be obscured and the scroll bars will not appear as a result of the animation.

I am incredibly unfamiliar with the canvas, so if someone could give me a hand without breaking the original animation, that would be very grateful. :)

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 (included: jQuery and GSAP TweenMax libraries)

 /* 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']); })(); 

Answer 1

This is what I was able to create based on my understanding, I could be wrong.

Here is what has changed from your code:

• canvas HTML element moves and moves, placed just before the container HTML element opens.
• Both canvas and container got position: absolute z-index values ​​of 0 and 1 respectively, using the .set() JavaScript TweenMax methods.
• canvas width and height also set to the innerWidth and innerHeight of the window object.
• A render continuous method is created that hooks to the tick event, which is fired by the ticker inside the TweenLite .
• The initial properties of the animation are set in the canvasProps object.
• This canvasProps object canvasProps then animated using three calls to the .to() TweenMax method.
• Finally, the render method continues to update the canvas and draws a circle based on the ever-changing values ​​found in canvasProps .

JavaScript:

 (function() { var container = $('.container'); var canvas = $('.circle')[0]; var context = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; TweenMax.set(container, { position: 'absolute', zIndex: 1 }); TweenMax.set(canvas, { position: 'absolute', zIndex: 0 }); var canvasProps = { currX: window.innerWidth * 0.5, currY: window.innerHeight * 0.5, currRadius: 0 }; TweenLite.ticker.addEventListener('tick', render, false); TweenMax.to(canvasProps, 1, { currRadius: 200, ease: Expo.easeInOut }); TweenMax.to(canvasProps, 1, { delay: 1, currX: 200, ease: Expo.easeInOut }); TweenMax.to(canvasProps, 1, { delay: 2, currRadius: window.innerWidth, ease: Expo.easeInOut }); function render() { context.clearRect(0, 0, window.innerWidth, window.innerHeight); context.beginPath(); context.arc(canvasProps.currX, canvasProps.currY, canvasProps.currRadius, 0, Math.PI * 2, true); context.fillStyle = 'white'; context.fill(); } })(); 

Hope this helps.

Answer 2

If you expand the section in which you have the canvas and t1.from options, you can do what you are looking for (I added "var" to your canvas definition to access the variable later):

 var newWidth = $('#left_column').width(); var growBy = newWidth/canvas_width; var grow_opts = { 'grow': { scale: growby, transformOrigin "0px 0px", delay: 1.5 } }; tl.to(canvas, 1, grow_opts['grow']); 

gist with fork of your code code here: https://gist.github.com/rddill-IBM/1b92bf6c03d427259a06