Share Posted May 15, 2012 Hi guys first of all let me congratulate you on your js engine - it's looking pretty awesome. I have a question about tweening the css properties for top and left - i've implemented it as it seems like it should be but im not getting any result from the positional tweens, although the backgroundColor tween is working correctly. <!DOCTYPE html> <html> <head> <title>Test Animation</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/easing/EasePack.min.js"></script> <script type="text/javascript" src="js/TimelineLite.min.js"></script> <script type="text/javascript" src="js/TweenLite.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var plus = document.getElementById('plus'); var timeline = new TimelineLite(); timeline.append(new TweenLite(plus, 1, {css:{opacity:"0"}, ease:Quad.easeOut})); timeline.append(new TweenLite(plus, 1, {css:{opacity:"1"}, ease:Quad.easeIn})); timeline.append(new TweenLite(plus, 1, {css:{top:"500px", left:"100px", backgroundColor:"#ff9900"}, ease:Bounce.easeOut})); }); </script> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div id="banner"> <img id="plus" src="img/plus.png" alt="plus"> </div> </body> </html> I've tried dropping #plus into a div and animating that but that's not working either - is there a css trick i'm missing to be able to do this? Link to post Share on other sites
Author Share Posted May 15, 2012 ah never mind - i got it in main.css img, div { position:absolute; } Link to post Share on other sites
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