Mirror with javascript

Problem:mirror with javascript

Saola Animate version: 2.7.1

OS: Windows 10 Home



I have a scene with an isometric room with a table near the door. When the animation starts, if I click on the table, it nicely moves by the window. If I click again, it returns to the original position near the door. The following functions do the work:

function getPosition(elementName) {
** var computedStyle = getComputedStyle(elementName.dom, null);**
** return computedStyle;**

onMouseClick event:

function moveTable(doc, e) {
** var table = doc.getElement(“table”);**
** var pos = getPosition(table);**

** if (pos.left <= “248px”) {**
** pos = getPosition(table);**
** table.setPosition(340,225);**
** }**
** else {**
** pos = getPosition(table);**
** table.setPosition(146,231);**
** }**

I would like the table could rotate 90deg on the right (horizontally mirrored) when it is positioned by the window. To get the rotation, I was thinking to apply xScale = -100%. However, I don’t know how it can be implemented in javascript inside the above moveTable function. I followed code instruction found here and there on the Internet, but none of them worked. Is there anyone that can help me, please?

Thank you in Advance,

Hi Tony,

To set Scale X, you can use table.setProperty('scaleX', -100);
However, it’s more simple to use an additional timeline to move the table from the door to the window and mirror it.
You just need to add script to check if the table is near the window or the door to run the timeline in the suitable direction.

function onTableClicked(doc, e) {
  // init initial state (near the door)
  if (this.nearDoor === undefined) {
    this.nearDoor = true;
  var timeline = doc.getTimeline('Timeline_1');
  // if near door: run timeline forward to the window
  // if near window: run timeline backward to the door
  timeline.start(1 /*speed*/, !this.nearDoor /*direction: true backward, false forward*/);
  // update position
  this.nearDoor = !this.nearDoor;

To create an additional timeline, please see this tutorial: https://atomisystems.com/html5-animation/using-multiple-timelines/


Thank you Toan Le,

I learned so much from your explanation. It was really illuminating.
Both solutions work well. However, the advantage of the second solution you suggested is certainly simpler, and it is not just the alternation of two fixed states (“table near the door” / “table near the window”), but it is a real animation of the table moving from one position to the other, with a better visual effect.

In the meanwhile, I had discovered an even more easy solution with two table objects fixed in their respective positions that show or hide themselves whenever you click on them. However, also in that case it was not an animation but the simple alternation of two fixed states.

Best Regards,

Hi Tony,

If you use two table objects, you can animate the table moving without coding:

  1. Add Display keyframes to the timeline to show/hide appropriate tables at the start and end of the timeline.
  2. Start the timeline forward when the table near the door is clicked.
  3. Start the timeline backward when the table near the window is clicked.


Hi Toan Le,

You gave me so many hints about Saola Animate and Javascript. Thank you very much for your great support.

Best Regards,