# How to smoothly change scene background color

**URL:** <https://discourse.threejs.org/t/how-to-smoothly-change-scene-background-color/39473>\
**Category:** Questions\
**Tags:** background, animation\
**Created:** [June 21, 2022, 9:56am UTC](https://discourse.threejs.org/t/how-to-smoothly-change-scene-background-color/39473 "2022-06-21T09:56:58Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 21, 2022, 12:03pm UTC](https://discourse.threejs.org/t/how-to-smoothly-change-scene-background-color/39473/2 "2022-06-21T12:03:46Z")

</div>

Define black as the default background color like so:

```nohighlight
scene.background = new THREE.Color(0x000000);

```

In your `scroll` even listener, do this instead of directly setting the color to red:

```nohighlight
 gsap.to(scene.background, {
      duration: 2,
      r: 1,
      g: 0,
      b: 0
    });

```

> **[broken-bash-z8qgi3 - CodeSandbox](https://codesandbox.io/s/admiring-river-nk7pme?file=%2Fsrc%2Findex.js)**
>
> broken-bash-z8qgi3 by StefanosOnigiri using gsap, parcel-bundler, three, three.js

---

_[View the full topic](https://discourse.threejs.org/t/how-to-smoothly-change-scene-background-color/39473)._