How does one animate an object to rotate in Lectora?

Excellent question.

I do this kind of thing in Lectora via CSS.

It's a pretty simple setup, really, but can seem confusing at first if you're not familiar with CSS/CSS animation.

If you'd like to follow along with the explanation, I've provided a sample file for you to pick apart.

All we need to do is assign a class to the object we'd like to rotate, and then define styles in a CSS object at top of the project.

In the sample file, let's start with the first row of objects. They all use the same class

First, select an object to rotate.

Then, select the Properties tab and the Appearance flyout.

In this field, enter the class name you'd like to use for the rotating object.

In the sample file, the top row's class name is cssSpin.

Next we need to add a CSS document to do the actual rotation.

To do that, press the insert tab and then HTML Extension.

Drag that object to the top of the page/project, and then set its type to Cascading Style Sheet.

On page 1 of the sample file, just open the CSS_Spin extension at top of the page.

Here, we need two elements to make the animation work:

1.) styles for the cssSpin class

2.) animation keyframes

1.) Styles/animation properties:

Toward the bottom of the CSS doc, you'll notice that we're adding an animation property to the cssSpin class called spin-right, a time for that animation to complete (15seconds), a timing function (essentially easing; in this case, linear), and then setting a loop count.

So, in this example: spin-right takes 15seconds to complete, uses linear easing, and continues infinitely.

If you want to adjust the rate of spin, just change the timing value as desired.

Similarly, if you'd like the object to *not* continue rotating indefinitely, but instead stop after 5 rotations, just change the "infiinte" value to "5"

2.) Animation keyframes:

After adding the animation style to the cssSpin class, we need to keyframe that animation.

I'll leave a link to some more detail on that here to compare to what's in the sample file.

At the top of the CSS_Spin extension, you'll see the @-webkit-keyframes spin-right block.

This is what makes the animation work. Refer back to my previous link.

In this case, we used rotation animation that goes all the way around (360°).

Once you've that's set up, your rotation animation should work,

Press Preview, to double check, or preview in browser to be more specific.

Note in the sample file that there are two rows of objects.

The top row of objects all use the same class and rotate in the same direction.

Similarly, the bottom row of objects all use a different class, and spin opposite the top row.

In that file, the top row objects use a class name of "cssSpin"

The bottom row uses "cssSpinLeft"

The setup is identical, but in the spin-left animation keyframes, we rotate the objects -360°.

Take a look through that file and see if you have any issues. You should be able to apply what's here with minimal editing to get what you're looking for.

I've also left a method showing how to apply this on-click.

Check page two.

In this case, I've left out the portion of our CSS file where we declared our animation properties and have applied those via jquery on the "SPIN" button.

Basically, we only apply the portion of CSS that causes the spin on demand.

To do that, we target the objects with class cssSpin via JQuery run on button action, and apply our animation style properties inline.

If you have any questions, let me know.