Jump to content

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

animating css properties

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>
<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}));
<link rel="stylesheet" type="text/css" href="css/main.css">
<div id="banner">
 <img id="plus" src="img/plus.png" alt="plus">


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

ah never mind - i got it


in main.css

img, div {

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.