Jump to content
GreenSock

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

Tutorial animation does not work

Recommended Posts

Hi,

 

I am new to using this library and am following the tutorials to understand, I have followed the first tutorial but nothing happens (animation does not work as the tutroial).

 

Any help is appreciated.

 

regards,

 

 

TweenMaxTest.html

Link to post
Share on other sites

Hi sanjshah,

1) you're referring to ".logo", which is a jQuery style selector. You'll need to declare a jQuery library to be able to use it's selector engine.
2) you need to add a little bit of CSS code, since you're trying to move .logo towards the right. position: relative; does that for you (for example).

 

I've completed your tutorial code to get you started (really simple example, exactly like the one you're trying out in your tutorial).
Copy paste this to your computer file (you've called it "TweenMaxTest.html") and you're good to go!"

Happy Tweening!
Jos

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
	</head>

	<body>
		<div class="logo" style="background-color: red; height: 50px; width: 50px; position: relative;"></div>


		<script>
			TweenMax.to(".logo", 12, {left:600});
		</script>
	</body>
	
</html>
  • Like 2
Link to post
Share on other sites

Thanks for jumping in Jos.

 

TweenLite uses document.querySelectorAll() behind the scenes if jQuery or other selector engine is not present.

So doing 

TweenMax.to(".logo", 12, {left:600});

without jQuery is fine

 

You can even use more elaborate css selector strings like "h2.special" or "h1, h2, h3, p".

 

The issue is that the tween was trying to update the left positional property but there is no css declaring that .logo has position: relative, absolute or fixed.

Adding the inline style of position:relative in your solution was the right thing to do.

 

We've addressed this in the video: http://prnt.sc/b4qwzd

And the description on youtube but folks still miss it occasionally. 

 

Sanjshah, If you have any more questions, please let us know. We love to help. My apologies if the position thing wasn't more evident.

  • Like 2
Link to post
Share on other sites

Many thanks Jos and Carl, I missed that important notice!

 

That work fine now.

 

Regards

Link to post
Share on other sites

@Sanjshah, animating in GSAP is really great fun and quite easy to do. You'll get the hang of it in no time!
I've only begun using GSAP since last week, and your question was my first opportunity to answer! ;-)
 

@Carl, cool that document.querySelectorAll() steps in, in case jQuery wasn't included!

Didn't know that myself, that's actually a a very useful GSAP feature for my library!
 

-Jos

  • Like 1
Link to post
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.

×