Share Posted May 16, 2016 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 comment Share on other sites More sharing options...
Share Posted May 16, 2016 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> 2 Link to comment Share on other sites More sharing options...
Share Posted May 16, 2016 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. 2 Link to comment Share on other sites More sharing options...
Author Share Posted May 16, 2016 Many thanks Jos and Carl, I missed that important notice! That work fine now. Regards Link to comment Share on other sites More sharing options...
Share Posted May 16, 2016 @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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now