Transform Menu needs an origin point using pixel rather than %

Saola Animate Feature Requests
1

Within the Transform Menu can you make the origin by pixel rather than by %. I have a wind turbine and i cant centre the origin at the exact middle of the wind turbine as i can only move at 1% degree changes. The windturbine at the moment doesnt rotate stationary at the point.

2

Hi,

The origin 50% should be at the exact middle of the element.
I guess you use an image for the wind turbine but the content of the image doesn’t center in the image frame so the issue.

Anyway, you can use one of the following workaround to adjust the origin:

  • Method 1: Use CSS
    1. Set a class name for the turbine in Properties > General tab, e.g. px-origin class name
    2. Add CSS for that class in Document > Edit CSS:
        .px-origin {
          /* x, y, z transform origin, !important to override values set in UI */
          transform-origin: 10px 20px 0 !important;
        }
  • Method 2: Use Group
    1. Right-click the turbine on the Canvas and select Group from the menu.
    2. Cut the turbine animations and paste to the group.
    3. Adjust the turbine position in the group.

Regards

4

Hello that is exactly right. The wind turbine does not occupy the image frame in its entirey.

I have clicked on the wind turbine blades and renamed the class to windturbineblades.

In edit CSS i then did this

{$systemFonts}
.windturbineblades {
/* x, y, z transform origin, !important to override values set in UI */
transform-origin: 10px 20px 0 !important;
}

the wind turbine appears to fly around the origin rather than rotating at the origin. Can you advise?

5

also it doesnt seem to change the yellow pivot point. If i could focus that onto the centre i can get the rotation correct

6

okay you have guided me to an answer. What i did was take the x, y and z values from google web designer and put then in the custom .css. Now the wind turbine moves smoothly around fixed pivot :):slight_smile: Thank you for your guidance

7

The CSS method only works when viewing animations, it doesn’t work when editing on Canvas.
So you’ll see the yellow transform origin point and the handle rectangle show incorrectly on Canvas.

Regards