Jump to content
Search Community

timelinelite novice help

tcawrse05 test
Moderator Tag

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 can't seem to get some tweens to work in my timeline but i can get them to work individually, please help!!
 
btw I use notepad++ and I've been testing with chome.
<!DOCTYPE HTML>
<html>
<title> Animation</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.3/TweenMax.min.js"></script>
<script>
	function animate(){
		c=document.getElementById("plane");
		var tl = new TimelineLite({onComplete:animate});
						tl.add(TweenMax.to(c, 3, {rotationY:360, transformOrigin:"left 50% -200"}));
						t1.add(TweenLite.to(c, 1, {rotation:1440}));
						t1.add(TweenLite.to(c, 2, {scrollTo:{y:300}, ease:Bounce.easeOut}));
			
	}

</script>

<body onload="animate();">

<header>
		<center><img src="plane.gif" alt="plane" id="plane"/></center>
</header>
	
	<footer>
	
	</footer>
</body>
	

</html> 
 
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.
 
Your code looks good. You will probably kick yourself for this, so I'll go easy on you;)
 
the last 2 lines of code in your timeline have t1 (number one) instead of tl (with a letter)
 
perhaps as a sans-serif font it will be more clear:
 
var tl = new TimelineLite({onComplete:animate});
tl.add(TweenMax.to(c, 3, {rotationY:360, transformOrigin:"left 50% -200"}));
t1.add(TweenLite.to(c, 1, {rotation:1440}));
t1.add(TweenLite.to(c, 2, {scrollTo:{y:300}, ease:Bounce.easeOut}));
 
Fix that and I think you're good to go;)
 
Also, as a bonus, your code can be more concise by using TimelineLite's to() method.
 

 

var tl = new TimelineLite({onComplete:animate});
tl.add(TweenMax.to(c, 3, {rotationY:360, transformOrigin:"left 50% -200"}))
.to(c, 1, {rotation:1440})
.to(c, 2, {scrollTo:{y:300}, ease:Bounce.easeOut});

You were correct in using add() for the TweenMax, but the to() convenience method automatically creates a TweenLite tween and inserts it into the timeline. So you get away with much less code.

 

Also notice that multiple commands are chained together.

 

Check out the to() method here.

 

You didn't do anything wrong by using add(), but to() is just a bit more concise.

 

If you are just getting started with the TimelineLite, check out this video. I think it will make some of the features very clear: http://www.greensock.com/sequence-video/

 

Let us know if you have any more questions.

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