Changing Background Image

[jaeeun]

Hi,

 

I'm trying to make a background image change to a different image with this code;

TweenMax.to($("#icon_media"),{css:'background-image','url(img/icon_media_orange.png)'});

But it doesn't seem to work.

 

The reason why I'm doing this is because eventually I want to use the code with superscrollorama so as to make an image in a fixed nav bar change when the browser window scrolls down and reaches certain div/panel, but I thought if I could figure out the tweenmax part first it would be easy to add superscrollorama effect to it later.

 

I'd appreciate your help. 

[Rodrigo]

Hi,

 

For zero duration tweens better use the set() method. Also every css property works on camelCase, so in this case your code should be:

TweenLite.set($("#icon_media"), {backgroundImage:'url(img/icon_media_orange.png)'});

Also if you're going to use the css wrapper it shoud be like this:

TweenLite.set($("#icon_media"), {css:{backgroundImage:'url(img/icon_media_orange.png)'}});

Rodrigo.

[jaeeun]

Thank you!

[brennamacquarrie]

hi! I am also trying to do this, do i need to register a plugin to enable this? I'm getting some syntax errors in my code

where .background is my <header> element with a background-image: set in my css, which I want to toggle either over time or with a button, neither of which are working just yet. thanks so much, super stoked on gsap, first day using it!

		TweenLite.set($(".background"), { css: { backgroundImage: 'url(/assets/siteHeaderOne.jpeg') } });

 

Edited October 5, 2020 by brennamacquarrie
code posts weird, fixing

[GreenSock]

@brennamacquarrie welcome to the forums!

 

If you need some help, please provide a minimal demo so we can see the issue in context. https://greensock.com/demo explains how. 

 

Please keep in mind that you can't really "animate" a change of the background image URL. What exactly were you expecting to happen? GSAP can definitely set that value for you - I just tested and it seems to work fine. If your goal is to crossfade images or something, just set up two <img> elements on top of each other and animate the opacity (or autoAlpha) of the top one.