How to change a backgroundColor to a backgroundImage with GSAP while scrolling?

[aLinarte1920]

Hi everybody!
I have an animation defined to the following element, parentContainer:

 

gsap.to(parentContainer.current, {

      backgroundImage: url();

      duration: 3,

      scrollTrigger: {

        trigger: parentContainer.current,

        start: "center top",

        markers: true,

        scrub: true,

       

      },

    });

 

it doesn"t work if i do the following: backgroundImage: "url("./assets/background.jpg")"
but it works if i do this backgroundColor: "red",

backgroundImage expects a value from gsap.TweenValue, but I don't know how to pass it to it.

thank you very much in advance, greetings from nicaragua

[mvaneijgen]

Hi @aLinarte1920 welcome to the forum!

 

If you write backgroundImage: "url('./assets/background.jpg')" it should work, if the current route has acces to it. You where using the same quote twice, so javascript would get the following input, String: "url(", Variable: /assets/background.jpg, String: ")", but you want to pass it just one string eg String: "url('./assets/background.jpg')". I don't know how to explain it better, but strings and variables are not the same thing.

 

Also backgroundImage is not really something you can tween, eg there is no in between state there either is the one image or there is the other image, so this would not really animate in that sense of the word. Better is to create the image already loaded on the page and set it's opacity: 0 and then in GSAP set opacity: 1, opacity is a property you can animate, because it is a number, so it goes from 0 to 0.1, 0.2, 0.3, ... till 1. If that makes sense?

 

From reading your code also keep in mind that duration doesn't really do much in this case, check out the following video 

 

 

 

If you still need help please make a minimal demo, so that we can dive directly into the code and help you debug, below a pen you can fork which loads all the plugins. And also check out this awesome getting started guide!  https://gsap.com/resources/get-started/

 

Hope it helps and happy tweening! 

 

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

[aLinarte1920]

Thanks it was that, although I had to add the absolute path of my image.

Cheers!