Jump to content
Search Community

Which external file need to call

rajeshjgd test
Moderator Tag

Go to solution Solved by rajeshjgd,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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-->
<!--CDN links for the latest TweenLite, CSSPlugin, and EasePack-->
 
<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>
Link to comment
Share on other sites

Seems like you are trying to access the pauseBtn before DOM is ready, this is working in Codepen because it is automatically taking care of that.

Putting you code inside DOMContentLoaded worked for me. Something like this:

 

document.addEventListener('DOMContentLoaded', function(){
    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";
    }
});
  • Like 1
Link to comment
Share on other sites

Great ideas everyone. Thanks for jumping in to help.

 

Rajesh, just so you know if you have something working in CodePen that you can't simulate locally, the best thing to do is use CodePen's Share button which will give you the option to download a zip. That way you can see exactly how the page is structured.

 

Also, another way to fix your local file would be to just add all your scripts at the bottom of the body like so

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>




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


<!--CDN link for the latest TweenMax-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.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>


</body>
</html>

That will ensure that the scripts will not execute until after the DOM elements exist.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...