Windows Phone loading animation made easy with TweenMax

INTRODUCTION

Eye-catching website animations can really grab attention and help increase conversions but it's not easy to create them. GreenSock provides some very useful and mature tools for tweening objects and putting them on a timeline, those are TimelineLite, TimelineMax, TweenLite and TweenMax . The “Max” versions extend the “Lite” versions in an object-oriented way, providing more functionality at the price of a slightly larger file size.

The TweenMax library make it so easy to create the loading animation style as you've seen on Windows Phone OS, let's see how

HOW TO USE

1. Include the TweenMax library

http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js

2. HTML

We have 5 circles to create the animation

<h1>Loading Animation Windows Phone Style</h1>
<div class="demo">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

3. CSS

A little CSS to make them look nice

body {
  background:#1d1d1d;
}

h1 {
  color: #999;
  font-family: Arial, sans-serif;
  font-weight:normal;
  text-align:center;
}
.demo {
  position:relative;
  margin:20px auto;
  width:620px;
  height:28px;
  background-color:#121212;
  border-radius:12px;
  overflow:hidden;
  border:solid 4px #121212;
}

.circle {
  width:20px;
  height:20px;
  background-color:#86cc01;
  position:absolute;
  border-radius:50%;
  display:inline-block;
  left:-20px;
  top:4px;
}

4. Let's do the animation

var tl = new TimelineMax();

tl.staggerTo(".circle", 1.5, {x:650, repeat:-1, repeatDelay:0.5, force3D:true, ease:SlowMo.ease.config(0.2, 0.5)}, 0.15)

DEMO

Here's a fork from GreenSock's pen

See the Pen Toggle Play Pause by Thanh Nguyen (@genievn) on CodePen.

Recent Post