Hi I am using the below code, but I am unable to run the animation. Your help will be appreciable a lot. Please find the code below, I am using a html editor to write my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!--CDN link for the latest TweenMax-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<!--CDN links for the latest TweenLite, CSSPlugin, and EasePack-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script>
var pauseBtn = document.getElementById("pause"),
tl = new TimelineMax();
tl.staggerTo(".circle", 1.5, {x:640, repeat:-1, repeatDelay:0.5, force3D:true, ease:SlowMo.ease.config(0.2, 0.5)}, 0.15)
pauseBtn.onclick = function() {
tl.paused(!tl.paused());
pauseBtn.innerHTML = tl.paused() ? "play" : "pause";
}
</script>
<style>
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;}
button { padding:10px; margin:0 10px; width:120px; cursor:pointer;}
.nav { width:600px; margin:auto; text-align:center;}
</style>
</head>
<body>
<h1>Easy Animation Play / Pause Toggle</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>
<div class="nav">
<button id="pause">pause</button>
</div>
</body>
</html>