Translate by Percentage

Saola Animate Support Questions
1

Apologies if I’ve asked this before, but I couldn’t find an answer with search.

Is there a reason why the translate settings are pixels only?

I have a situation where the project scene is 100% x 100% to fill the browser window. I have a rectangle element that is also set at 100% x 100% and it has an image fill set to the fill option to proportionately fill the whole window with the image.

As the scene plays, I wanted the image to shift 50% to the left. I know you should use translate for animations rather than left but translate is pixels only and setting to half the container (512px) fails on a larger window. Left works at (-50%) but fails on the iPad as the animation does not redraw correctly - leaving lines on the screen.

I’ve solved the problem by creating a class (transform: translateX(-50%)) and adding with JS when triggered.

Here’s a simplified example. Buttons top left. https://saola.interaktiv.co.uk/translate/

But it made me wonder why translate is pixels only in Saola?

Regards,

2

Hi mackavi,

If the translation unit is %, the motion path animation will not have a fixed shape and length.
Saola Animate will need to recreate the motion path, calculate the motion velocity… whenever the element resizes. It’s a heavy task that can make the animation weird so we don’t support the translation in % units.

For the repaint issue when animating the left property on iPads, you can try setting the element translate Z to 1px to overcome it.

Regards

3

Thanks for the information and reasoning.

I’ll have a play with Translate Z as I would prefer to control the slide left using the the Timeline rather than JS.

Cheers…