Jump to content
Search Community

animating css properties

overbyte 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

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