Jump to content
Search Community

Tutorial animation does not work

sanjshah test

By sanjshah
in GSAP

Moderator Tag
 Share
Go to solution Solved by JD9,

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

  • Solution
JD9 test

JD9

Posted
  • Solution
Posted

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 comment
Share on other sites
Carl test

Carl

Posted
Posted

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 comment
Share on other sites
JD9 test

JD9

Posted
Posted

@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 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.
×
×
  • Create New...