Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
vsiege

TimelineMax troubles

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

I'm having a ton of trouble trying to use TimelineMax for JS. I cannot get it to work at all. I must be missing something (if not a few things). I am trying to use the appendMultiple and insertMultiple methods, but nothing seems to be happening.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Tweening</title>
   <link type="text/css" href="exts_css/objects2Move.css" rel="stylesheet" />
   <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/plugins/CSSPlugin.min.js"></script>
   <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/easing/EasePack.min.js"></script>
   <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/TweenLite.min.js"></script>
   <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/TimelineMax.min.js"></script>
   <script> 
var r = document.getElementById("tiny");
    function hello() {

	    TweenLite.to(r, 1, {css:{top:"200px", left:"450px", backgroundColor:"#FF0000"}, ease:Power2.easeOut});
    }
    var tl = new TimelineMax();
    tl.append(TweenLite.to(r, 1, {css:{top:"200px", left:"450px", backgroundColor:"#FF0000"}, ease:Power2.easeOut}));

    function animateAll(){
	    tl.play();
    }
   </script>
</head>
<body>
<div id="tiny">
   help
</div>
<a href="#" onclick="animateAll()" style="left:220px; position:absolute;">Press me</a>
</body>
</html>

Link to comment
Share on other sites

I would suggest placing your <script> block right before the closing </body> tag. This way when you define

 

var r = document.getElementByID("tiny");

 

javascript will have access to that div. Right now I'm pretty sure that script is running before the DOM is even processed.

 

I couldn't see your css but it is imperative that the object you are doing a positional tween on has its position property set to absolute or relative (i did this inline in the example below)

 

 

<div id="tiny" style="position:absolute;">
help
</div>
<a href="#" onclick="animateAll();" style="left:220px; position:absolute;">Press me</a>
<script> 
var r = document.getElementById("tiny");
function hello() {
TweenLite.to(r, 1, {css:{top:"200px", left:"450px", backgroundColor:"#FF0000"}, ease:Power2.easeOut});
}
var tl = new TimelineMax({paused:true});
tl.append(TweenLite.to(r, 1, {css:{top:"200px", left:"450px", backgroundColor:"#FF0000"}, ease:Power2.easeOut}));
function animateAll(){
tl.restart();
}
</script>

 

In addition I also paused the timeline upon creation via the constructor vars like so

 

var tl = new TimelineMax({paused:true});

 

Otherwise the timeline would play automatically, which isn't bad, but since you were using tl.play(), that means that once the timeline was done playing, play() wouldn't do anything as it would play from its current position and timelines don't loop back to the beginning.

 

restart() always will play from the beginning.

 

give the code above a try and let us know if it works out for you. If so, you should have a good starting point for experimenting with appendMultiple()

 

Carl

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