# Rotate around and scale: scale animation is changing mesh position

**URL:** <https://forum.babylonjs.com/t/rotate-around-and-scale-scale-animation-is-changing-mesh-position/46127>\
**Category:** Questions\
**Created:** [December 2, 2023, 11:36pm UTC](https://forum.babylonjs.com/t/rotate-around-and-scale-scale-animation-is-changing-mesh-position/46127 "2023-12-02T23:36:11Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Asdrubal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/asdrubal/32/36271_2.png) [@Asdrubal](https://forum.babylonjs.com/u/Asdrubal)\
**Post date:** [December 2, 2023, 11:36pm UTC](https://forum.babylonjs.com/t/rotate-around-and-scale-scale-animation-is-changing-mesh-position/46127/1 "2023-12-02T23:36:11Z")

</div>

I’m trying to apply animationGroup with 2 animations at the same time:

- rotate around
- scale

Before that, I set the pivot:

```ts
    // set pivot
    const pivot = box.position
    const relativePosition = pivot.subtract(sphere.position);
    // relativePosition: {_isDirty: true, _x: 0, _y: 1, _z: -2}

```

The rotate around animation works fine:

> **[Babylon.js Playground](https://playground.babylonjs.com/#KSQ8WQ%237)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

But when I tried to apply the scale animation, it changed the mesh position (WHY? 😫):

> **[Babylon.js Playground](https://playground.babylonjs.com/#KSQ8WQ%2316)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Here’s more like what I’m trying to achieve:

- rotate around while scaling on any axis:

But spheres position keep changing due to pivot. How to fix?

> **[Babylon.js Playground](https://playground.babylonjs.com/#KSQ8WQ%2317)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Asdrubal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/asdrubal/32/36271_2.png) [@Asdrubal](https://forum.babylonjs.com/u/Asdrubal)\
**Post date:** [December 3, 2023, 12:16am UTC](https://forum.babylonjs.com/t/rotate-around-and-scale-scale-animation-is-changing-mesh-position/46127/2 "2023-12-03T00:16:06Z")

</div>

OK, I get it using absolutePosition:

> **[Babylon.js Playground](https://playground.babylonjs.com/#KSQ8WQ%2310)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![withADoveInOneHand](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/withadoveinonehand/32/1243_2.png) [@withADoveInOneHand](https://forum.babylonjs.com/u/withADoveInOneHand)\
**Post date:** [December 3, 2023, 12:16am UTC](https://forum.babylonjs.com/t/rotate-around-and-scale-scale-animation-is-changing-mesh-position/46127/3 "2023-12-03T00:16:34Z")

</div>

You were setting your sphere pivot point off the box, which is y = 1  
So the sphere scaling is pivoting from y+1

---

<div class="post-metadata">

**Author:** ![Asdrubal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/asdrubal/32/36271_2.png) [@Asdrubal](https://forum.babylonjs.com/u/Asdrubal)\
**Post date:** [December 3, 2023, 12:40am UTC](https://forum.babylonjs.com/t/rotate-around-and-scale-scale-animation-is-changing-mesh-position/46127/4 "2023-12-03T00:40:15Z")

</div>

Yeah… absolutePosition is not the answer 🫤

```ts
// set pivot
const pivot = box.absolutePosition
console.log("pivot", pivot)
// {_isDirty: true, _x: 0, _y: 0, _z: 0}
const relativePosition = pivot.subtract(sphere.position);
console.log("relativePosition", relativePosition)
// relativePosition:{_isDirty: true, _x: 0, _y: 0, _z: -2}

```

> **[Babylon.js Playground](https://playground.babylonjs.com/#KSQ8WQ%2314)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Asdrubal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/asdrubal/32/36271_2.png) [@Asdrubal](https://forum.babylonjs.com/u/Asdrubal)\
**Post date:** [December 3, 2023, 1:10am UTC](https://forum.babylonjs.com/t/rotate-around-and-scale-scale-animation-is-changing-mesh-position/46127/5 "2023-12-03T01:10:19Z")

</div>

Yeah, a `relativePosition.y = 0;` would solve the problem. The pivot is used to rotate around.

What i didn’t get is how to compensate the scaling maintaining the pivot

Or how to make these 2 animations work together on any axis

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [December 3, 2023, 12:08pm UTC](https://forum.babylonjs.com/t/rotate-around-and-scale-scale-animation-is-changing-mesh-position/46127/6 "2023-12-03T12:08:20Z")

</div>

Note that you must call `box.computeWorldMatrix(true);` for the `absolutePosition` property to be updated correctly.

---

<div class="post-metadata">

**Author:** ![Asdrubal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/asdrubal/32/36271_2.png) [@Asdrubal](https://forum.babylonjs.com/u/Asdrubal)\
**Post date:** [December 4, 2023, 6:05pm UTC](https://forum.babylonjs.com/t/rotate-around-and-scale-scale-animation-is-changing-mesh-position/46127/7 "2023-12-04T18:05:02Z")

</div>

As @withADoveInOneHand pointed y+1, Setting `axis:0` I was able to rotate and scale at the same time:

> **[Babylon.js Playground](https://playground.babylonjs.com/#KSQ8WQ%2321)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

I’m not happy with the result, seems pretty unstable. At least the objective of the issue was achieved 😆

Thank you guys 🫡

---

<div class="post-metadata">

**Author:** ![Asdrubal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/asdrubal/32/36271_2.png) [@Asdrubal](https://forum.babylonjs.com/u/Asdrubal)\
**Post date:** [December 5, 2023, 7:00pm UTC](https://forum.babylonjs.com/t/rotate-around-and-scale-scale-animation-is-changing-mesh-position/46127/8 "2023-12-05T19:00:31Z")

</div>

Here we can see how the rotationAnimation + scaleAnimation don’t walk in a **perfect circle around the target** (box):

- redSphere : rotationAnimation + scaleAnimation
- sphere2: scaleAnimation + rotateAround

The problem with using “rotateAround” is that it is cumulative, we cannot control and predict where it will end up.

`relativePosition.y = 0;` solves the problem partially

Using “absolutePosition” with “computeWorldMatrix” has the same result using “position”

 ![Screenshot from 2023-12-05 18-44-17](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/b/bb99f35cd51132880bbe296bace9a8b3218bba82.png)

> **[Babylon.js Playground](https://playground.babylonjs.com/#KSQ8WQ%2327)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Asdrubal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/asdrubal/32/36271_2.png) [@Asdrubal](https://forum.babylonjs.com/u/Asdrubal)\
**Post date:** [December 31, 2023, 12:33pm UTC](https://forum.babylonjs.com/t/rotate-around-and-scale-scale-animation-is-changing-mesh-position/46127/9 "2023-12-31T12:33:35Z")

</div>

I finally did it! It needs some tweaking, but that’s basically it.

I was a little worried about making an animation with a lot of keys, but it works well.  
What a great end to the year! 🤣

Happy New Year! 🎉 God bless you all 🙏 who helped me and others in this amazing babylonjs community!

> **[Babylon.js Playground](https://playground.babylonjs.com/#KSQ8WQ%2330)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes