Jump to content
Search Community

rajeshjgd

Members

  • Posts

    3

  • Joined

  • Last visited

Recent Profile Visitors

1,045 profile views

rajeshjgd's Achievements

0

Reputation

1

Community Answers

  1. rajeshjgd
    Thanks a ton awp.black.69 . It is solved now. As this is my first sample. Once again thanks a ton.
  2. rajeshjgd
    Waiting for the solution. Your help will really help me to continue with my work. I can run the code from CodePen (http://codepen.io/rajeshjgd/pen/cxbrJ) but not in the html code.
  3. rajeshjgd
    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>
×
×
  • Create New...