Animation with GSAP: Project 1.5

HTML
<div class="preloader"> <div class="circle circle1"></div> <div class="circle circle2"></div> <div class="circle circle3"></div> </div>
CSS
body { padding: 0; margin: 0; background-color: #3E3C41; font-family: 'Montserrat', sans-serif; } body, html { width: 100%; height: 100%; } .preloader { width: 100%; height: 100%; background-color: #3E3C41; z-index: 10; position: absolute; } .circle { opacity: 0; border-radius: 190px; box-shadow: 0 4px 8px rgba(0,0,0,.4); position: absolute; top: 50%; left:50%; } .circle1 { background-color: #7752d5; width: 240px; height: 240px; margin-top: -120px; margin-left: -120px; } .circle2 { background-color: #8362d9; width: 170px; height: 170px; margin-top: -85px; margin-left: -85px; } .circle3 { background-color: #9f88d6; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; }
JAVASCRIPT
var $circles = $(".circle"), tl = new TimelineMax(), imageUrls = [ + getRandomNum(), ], images = []; function getRandomNum() { return Math.floor(Math.random() * 10000); } function loaderOut() { console.log("Image is done loading"); } TweenMax.set($circles, { scale: 0 }); tl.insert( TweenMax.staggerTo($circles.toArray(), 1, { opacity: 1, scale: 1, ease: Power1.easeIn }, .2) ); tl.insert( TweenMax.staggerTo($circles.toArray(), .5, { scale: 1.2, boxShadow: "0 25px 25px rgba(0,0,0,.4)", repeat: -1, yoyo: true, ease: Power1.easeOut }, .2), "-=.4" );
Expand for more options Login