Jump to content
GreenSock

rajeshjgd

Which external file need to call

By rajeshjgd, in GSAP. Views: 2,335

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

Posted

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
  • Author
Posted

Waiting for the solution. Your help will really help me to continue with my work.

I can run the code from CodePen (

See the Pen cxbrJ by rajeshjgd (@rajeshjgd) on CodePen

) but not in the html code.

Link to comment
Share on other sites
Posted

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
  • Solution
  • Author
  • Solution
Posted

Thanks a ton awp.black.69 .  It is solved now. As this is my first sample. Once again thanks a ton.

Link to comment
Share on other sites
Posted

Hi rajeshjgd :)

 

you don't need to load all of them , the TweenMax.js file includes all of  the necessary plugins  :

CSSPlugin , RoundPropsPlugin , BezierPlugin , AttrPlugin , DirectionalRotationPlugin , EasePack , TimelineLite, and TimelineMax. 

  • Like 2
Link to comment
Share on other sites
Posted

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account