Changing Bg-image

[djburner 1 Likes (Newbie)]

Hi there, I can't get how to animate the background-image in TweenMax.

 

TweenMax.to(obj,1,{css:{backgroundImage:"don't know what to put here"},ease:Expo.easeOut});

 

Is there a place where I can find all the syntax to use in the TweenMax's lines for all the CSS properties?

I mean css property of margin-top is marginTop in TweenMax's line, well I'm looking for that but with all properties.

 

TweenMax with js flavor is plain AWESOME!

Greetings guys.

[jamiejefferson 1,185 Likes (Superhero)]

I'm only guessing that you are after a crossfade from the current background image to a new background image, but unfortunately tweening a change to an elements background-image is not directly possible due to restrictions in the way css works.

 

You could achieve it by layering two elements/images on top of each other and tweening the top images opacity to 0, but it would require you to restructure your HTML a bit first.

 

I'm not sure if Jack maintains a simple list of the CSS properties that work well in CSSPlugin (e.g. CSS2 is well supported but I believe CSS3 support is currently being worked on), but the reason the CSS property margin-top is defined as marginTop when you target it with TweenMax is that this is actually the name of the property in Javascript. It's not my favourite resource, but if it helps, w3schools has a list of style properties in regular Javascript.

[Carl 9,066 Likes (Superhero)]

Like Jamie, don't know if you want to move the background image or change it.

 

the CSSPlugin recognizes the css background-position property as backgroundPosition.

 

Please see this example:

http://jsfiddle.net/geekambassador/WccmB/

 

mouse over the image of the map.

 

sample usage of backgroundPosition:

TweenLite.to(img, 7, {css:{backgroundPosition:"-100px"}}); //move bg image 100 px left
TweenLite.to(img, 7, {css:{backgroundPosition:"0px 50px"}}); // move bg image 50px down

 

Thanks for the idea of making a list of all supported css properties.

Will have to look into that.

 

And yes, 3D transforms, and some other cool CSS3 props are definitely coming soon.

 

-c

[Rodrigo 2,662 Likes (Superhero)]

Hi,

 

Here is a simple example of background change layering the different elements, meaning there are three background images and a div with text in front of them. The background images are changed with a crossfade tween:

 

http://jsfiddle.net/rhernando/4ALZb/4/

 

Cheers,

Rodrigo.

[djburner 1 Likes (Newbie)]

Oh my, I was trying such an stupid approach, yep: 2 divs. Guys you rock.

Greetings.