Animation not working?

[Cowdar]

First of all I'm a Noob 

I got this animation

 tl.staggerTo(Shows, 0.2, {  css:{color:"#EEEE"}, left:"10px" }, 0.1);

 

The colour changes but there's no movement 

and if I delete the css then the movement work.

but I cant seem to get them to animate together?

 

any help would be great  

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

The issue is that all CSS properties need to be wrapped in the css:{} object. In your code left is outside the object, therefore is not being dispatched to the CSS Plugin. Try this:

tl.staggerTo(Shows, 0.2, {  css:{color:"#EEEE", left:"10px"} }, 0.1);

// this will have the exact effect since the css:{} object is optional
tl.staggerTo(Shows, 0.2, { color:"#EEEE", left:"10px" }, 0.1);

Also check that the elements you're animating have a position set, whether absolute, relative or fixed, otherwise GSAP instances that animate position properties won't work.

 

Finally for the next time please read this post so you can learn how to create a live reduced sample, which always helps identify and solving issues faster:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.

[Cowdar]

Thanks