Jump to content
GreenSock

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

Changing Bg-image

Recommended Posts

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

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

Greetings.

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