Rotating Fan

[georgestefan]

Hello, I am using the following code to rotate a image with a fan:

<img id="fan" style="position: absolute; left: 216.578px; top: 440px; height: 100px;" src="/rest/v2/file-stores/default/Exhaust_fan.png" ng-class="{'ma-spin-counterclockwise': !page.spin, 'ma-spin-clockwise': page.spin}">

I want to know if it's possible to link the rotation to a variable and change the rotation according to the data from that point, the point will be from 0 to 100% representing the real fan rotating speed.

[Jared Wiltshire]

Yes its possible, here's an example.

Add this style to your page (we need the default duration to be 0s so we have to add our own class).

<style>
.my-spin-clockwise {
  transform-origin: 50% 50%;
  animation: spin-clockwise 0s linear infinite;
}
</style>

You can then change the duration of the animation like this.

<img src="/fan.svg" class="my-spin-clockwise" ng-style="{'animation-duration': 50 / point.value + 's'}">

However the animation restarts whenever the duration changes so you may want to round the point value like so

<img src="/fan.svg" class="my-spin-clockwise" ng-style="{'animation-duration': 50 / (point.value - point.value % 10) + 's'}">

[georgestefan]

@jared-wiltshire said in Rotating Fan:

ng-style="{'animation-duration': 50 / (point.value - point.value % 10) + 's'}"

Thanks, works well!

[James]

This post is deleted!