animare un cerchio con Canvas - come espandersi per riempire l'intera finestra?

Question

Codepen

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

Configurazione di base:

Sto cercando di creare una pagina strutturata con 2 colonne all'interno di un contenitore centrato, max 1600px di larghezza.

La colonna di sinistra contiene il contenuto della pagina. La colonna di destra contiene un'unità pubblicitaria (ad esempio, 640x480 px di larghezza).

A 768px o inferiore di punto di interruzione multimediale, le 2 colonne devono essere impilate (in modo che il contenuto sia in primo piano e l'annuncio sia sotto di esso).

Il problema

Al caricamento della pagina, ci dovrebbe essere un elemento 400x400px tela contenente un cerchio bianco al centro dello schermo (centro assoluto - verticale e orizzontale).

Il cerchio si anima in una posizione direttamente dietro il contenuto della colonna sinistra.

Dopo questo, il cerchio deve "espandersi" per riempire l'intero viewport dell'utente, senza coprire il contenuto o causare barre di scorrimento per apparire.

Come mostrato nel mio violino di seguito, ho ottenuto l'animazione iniziale del cerchio/movimento per funzionare, tuttavia sto riscontrando problemi cercando di capire la porzione di espansione. Ho bisogno che il cerchio appaia per crescere/espandersi fino a coprire l'intera finestra, ma tutto il contenuto del testo/unità pubblicitaria non deve essere oscurato e non devono apparire barre di scorrimento come risultato dell'animazione.

Sono incredibilmente poco pratico con la tela, quindi se qualcuno potesse darmi una mano con senza interrompere l'animazione iniziale questo sarebbe molto apprezzato. :)

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 (inclusi: jQuery e GSAP TweenMax biblioteche)

/* 
    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 è ciò che sono stato in grado di produrre in base alla mia comprensione, potrei sbagliarmi.

Ecco che cosa è cambiato dal codice:

• canvas elemento HTML è stato promosso e si è trasferito fuori, messo poco prima dell'apertura della container elemento HTML.
• Sia canvas e container è stato dato un position: absolute con z-index valori di 0 e 1 rispettivamente, attraverso l'uso di .set() metodi di TweenMax in JavaScript.
• canvas 's width e height siano regolate su innerWidth e innerHeight di window oggetto rispettivamente.
• un funzionamento continuo viene creata render metodo che è agganciato in tick evento che viene generato da ticker oggetto presente all'interno TweenLite oggetto.
• Le proprietà iniziali dell'animazione sono impostate nell'oggetto canvasProps.
• Questo oggetto canvasProps viene quindi animato utilizzando tre chiamate al metodo .to() di TweenMax.
• Infine, il metodo render mantiene aggiornare la tela e disegna un cerchio in base ai valori che cambiano continuamente trovati all'interno canvasProps metodo.

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(); 
    } 
})(); 

Spero che questo aiuti.

Answer 2

Se si estende la sezione in cui sono presenti le opzioni di tela e t1.from, è possibile ottenere ciò che si sta cercando (ho aggiunto una "var" alla definizione della tela in modo da poter accedere alla variabile in un secondo momento):

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']); 

succo con la forcella del codice codepen qui: https://gist.github.com/rddill-IBM/1b92bf6c03d427259a06