TimelineMax troubles

vsiege · October 11, 2012

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>

Carl · October 11, 2012

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

Notifications

Messages

TimelineMax troubles

Warning: Please note

Recommended Posts

vsiege

Link to comment

Share on other sites

Carl

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members