Controlling 3D Transform Element Using Javascript

Saola Animate Support Questions
#1

I was used a slider control animation sample project and modify it to controlling height and width of elements to make an interactive simulation… That’s amazing… Soala is wonderful

I would like to do the same thing with 3D transform, but I dont know how to do it. :cry:
How to controlling 3D transform (i.e: 3D Scale) using Javascript?

Best regard.

#2

Hi,

It’s simple if you want to do the same thing as the “control animations” sample for 3D transformation.
You just need to create 3D transform animations on the timeline and drag the slider to scrub the timeline.
The script is the same for any types of animations, you don’t need to modify it.

Regards

1 Like
#3

I would like to controlling elements property using slider, not in animation form.
Something like this.
This 2D transform, I would like to manipulate the 3D properties.Slider.saolapack (3.3 KB)

But I don’t find it in API references for Scale, rotate, etc.

#4

You can use element.setProperty('propertyName', propertyValue) to set transform properties.
For example:

doc.getElement("kotak").setProperty('rotateX', output);

For more information about the setProperty method, please see this topic: API documentation questions

However, instead of setting properties using JavaScript like this, you can create a timeline with animations (e.g. rotateX from 0 to 360) but don’t play the timeline. After that, you use the script to scrub the timeline as in the control-animations sample. Doing this way you can control any property with the same script.

Regards

2 Likes
#5

Thank you so much. :smiling_face_with_three_hearts: