Search the Community
Showing results for tags 'basic of greensock'.
Found 1 result
-
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>
