blog.web68.vn

our sponsors

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  TimelineLiteTimelineMaxTweenLite 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

loading animation windows phone style

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.


Tags
effect  javascript  animation  loading  
comments powered by Disqus