backgroundImage number bug

[manar_mk]

I found a bug while working with gsap.to function.
While passing backgroundImage  path with numbers it adds some unexpected decimals. 

Any ways to avoid or fix this problem?

See the Pen oNWddXe by manar_mk (@manar_mk) on CodePen

[OSUblake]

There's no bug. You can't animate a background image like that. What should the background be at 50%?

 

GSAP is just doing string interpolation. It would be the same as doing this.  It's just finding n-o-n-e and filling in the blanks.

 

let obj = {
  backgroundImage: "none"
};

gsap.to(obj, {
  backgroundImage: 'url("http://atlantaplanningguys.com/wp-content/uploads/2010/07/Image-2-the-numeral-4.jpg")',
  onUpdate() {
    console.log(obj.backgroundImage)
  }
});

 

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

 

Just use .set() instead.

gsap.set('.bg',{
  backgroundImage: 'url("http://atlantaplanningguys.com/wp-content/uploads/2010/07/Image-2-the-numeral-4.jpg")'
})