# How to make the model tilt when scrolling

**URL:** <https://discourse.threejs.org/t/how-to-make-the-model-tilt-when-scrolling/22848>\
**Category:** Questions\
**Tags:** scrolling\
**Created:** [January 26, 2021, 8:11pm UTC](https://discourse.threejs.org/t/how-to-make-the-model-tilt-when-scrolling/22848 "2021-01-26T20:11:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![marnue](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marnue/32/15839_2.png) [@marnue](https://discourse.threejs.org/u/marnue)\
**Post date:** [January 26, 2021, 8:11pm UTC](https://discourse.threejs.org/t/how-to-make-the-model-tilt-when-scrolling/22848/1 "2021-01-26T20:11:05Z")

</div>

Hello,

I’m trying to make my model tilt on page scroll, but so far it tilts only on the mouse hover. You can see it live [here](https://holesa.github.io/staging/poly/index.html).

I’m using document.onmousemove for mouse hover, but for page scroll, I tried document.onscroll and it doesn’t work. The model immediately disappears when scrolling.

I would like if it worked like in this [example](https://www.translate-wf.com/).  
So, when a user scrolls the page, the model would tilt, not on mouse hover.

My code :

```javascript
  
const loader = new THREE.GLTFLoader();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.getElementById("mountain").appendChild(renderer.domElement);

camera.position.y = 10;
camera.position.z = 60;

loader.load(
  "https://holesa.github.io/staging/poly/models/mountains.glb",
  function (glb) {
    glb.scene.scale.set(0.01, 0.01, 0.01);
    glb.scene.rotateX(101);
    glb.scene.rotateY(0.2);
    scene.add(glb.scene);
  },
  function (xhr) {
    console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
  },
  function (error) {
    console.log("An error happened");
  }
);

const lightA = new THREE.AmbientLight(0x404040); // soft white light
scene.add(lightA);

const lightP = new THREE.PointLight(0x557bc9, 1);
lightP.position.set(-10, 30, 500);
scene.add(lightP);

var mouseTolerance = 0.3;

document.onmousemove = function (e) {
  var centerX = window.innerWidth * 0.4;
  var centerY = window.innerHeight * 0.4;

  //scene.rotation.y = ((e.clientX - centerX) / centerX) * mouseTolerance;
  scene.rotation.x = ((e.clientY - centerY) / centerY) * mouseTolerance;
};

const animate = function () {
  requestAnimationFrame(animate);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.render(scene, camera);
};

animate();

```

Thank you.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [January 27, 2021, 2:20am UTC](https://discourse.threejs.org/t/how-to-make-the-model-tilt-when-scrolling/22848/2 "2021-01-27T02:20:36Z")

</div>

> [@marnue](#):
>
> The model immediately disappears when scrolling.

It should work - also, it might be easier to do the tilting with `mousewheel` event first, since it gives you the delta automatically ([example](https://codepen.io/mjurczyk/pen/zYKgaEX?editors=0110).)

It’s possible that your model disappeared because you might have given it an invalid rotation value (undefined or a NaN, if `centerY` was 0 for example 🤔 .)

---

<div class="post-metadata">

**Author:** ![marnue](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marnue/32/15839_2.png) [@marnue](https://discourse.threejs.org/u/marnue)\
**Post date:** [January 27, 2021, 5:21pm UTC](https://discourse.threejs.org/t/how-to-make-the-model-tilt-when-scrolling/22848/3 "2021-01-27T17:21:22Z")

</div>

Thanks. Your comment helped me to fix it. This code works for me:

```javascript
window.onscroll = (e) => {
    scene.rotation.x = this.scrollY / 700.0;
  };

```