Jump to content
GreenSock

jaeeun

Changing Background Image

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,

 

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. 

Link to comment
Share on other sites

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.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

  • 6 years later...

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 by brennamacquarrie
code posts weird, fixing
Link to comment
Share on other sites

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

  • Like 2
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.
×