Jump to content
Search Community

Changing Bg-image

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

  • 3 weeks later...

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