Rotate object infinitely without using timeline

Getting Started
1

I am using this code:

var a = hypeDocument.getElementById('a');

hypeDocument.setElementProperty(a, 'rotateZ',  val1 , time1, 'linear')

How can I rotate infinitely using the above code?

I saw this: Howto: Loop or Repeat an Animation,
but I want to do it without using timeline :slight_smile:

2

Something like this might work??

var a = hypeDocument.getElementById('a');
var val1 = 0, time1 = 1.0;

function mainLoop() {
	val1 += 6;
	hypeDocument.setElementProperty(a, 'rotateZ',  val1, 0, 'linear')
    requestAnimationFrame(mainLoop);
}

requestAnimationFrame(mainLoop);

This would animate the element 360º / 1s (roughly)

3 Likes
3

Thanks. That is working.
But I am having a doubt. Won’t this create a problem as you are calling
requestAnimationFrame(mainLoop);
Without knowing if the tween to increment the angle by 6 degrees has completed or not?
And why there is a “0” in place of time? Is it a typo? I am confused since even if it’s a typo it’s working?

4

@VishwasGagrani

This is a common looping tactic using requestAnimationFrame. On each recursion the “val1” variable will always increase by 6 until you call cancelAnimationFrame() to cancel the “looping”.

The 0 is not a typo it’s just left there to show you that the animation with start immediately. If for example you put in 1.0 (1sec) it will start off slowly then resume at the same speed. Whichever is the preferred effect.

This is by no means a finished example. It’s just to show you a way to “infinitely” loop your animation.

2 Likes
5

Did not know about using the “0” duration. Thank You!

1 Like
6

slightly off topic, but to clarify the duration and timing function aren't even required if you want it to instantly change.

This is valid:

hypeDocument.setElementProperty(element, propertyName, value)

See that the in-app documentation view calls the other arguments out as optionalDuration and optionalTimingFunction:

optionalDuration is given in seconds; the default value is 0.

optionalTimingFunction will default to 'easeinout' if not provided.

2 Likes
7

so would

hypeDocument.setElementProperty(a, 'rotateZ',  val1 'linear'

work?

8

No, because be 4th argument must be the duration. Additionally there’s no point to having a timing function without a duration since it will just be applied instantly.

(you are missing a comma and closing parenthesis, so it will probably cause a syntax error first :wink:)

This will work:

hypeDocument.setElementProperty(a, 'rotateZ',  val1, 2.0);

It will cause a 2.0 second animation with an 'easeinout' timing function (the default if left unspecified).

Basically if a optionalDuration is given to setElementProperty, it creates an ad-hoc timeline animating that property. If no duration is given, it immediately changes the value.

1 Like
9

I don’t mean to be flippant but ok comma aside (my bad as I missed filling it in) I was simply pointing out to the OP the way he added the animation so as not to be too confusing. I of course understand the way you’ve done it with the API and the order of parameters but for clarities sake I was making it (maybe) clearer for the OP. :wink:

Also, and definitely off topic, I may have had a few too many drinks as my team (country) just won the Grand Slam (local … to the UK) rugby tournament so I’m definitely not firing on all cylinders :smiley:

2 Likes
10

Haha yeah my post was also off topic from the original Q, just seemed like an opportunity to clarify the API :slight_smile:.

1 Like
11

You don’t use var Timer1 = 1.0 , why?

12

He has but indirectly, so it is all on one line.

var val1 = 0, time1 = 1.0;

You can chain the type by using a comma " ," to separate the objects.
i

13

Thank you, this is very useful for any project, so how do you make an x or y rotation?
I’m trying with this one but nothing happens ‘rotateY’ or ‘rotateX’

Thanks again

14

The code utilized Hype's API which supports "rotateZ"... but not "X" or "Y". So we need to adjust the code to use a non-API approach the "style transform property":

document.getElementById("myDIV").style.transform = "rotateX(7deg)";

Project Demo: rotateDemo_JHSv1.hype.zip (12.8 KB)

So to adapt @DBear's work... (function rotateZ in the attached demo)

var a = hypeDocument.getElementById('a');
var val1 = 0, time1 = 1.0;
 function mainLoop() {
   val1 += 6;
    document.getElementById("a").style.transform = ("rotateX(" + val1 +"deg)");
// hypeDocument.setElementProperty(a, 'rotateZ',  val1, 0, 'linear')
// The Hype API code
        requestAnimationFrame(mainLoop);
    }

    requestAnimationFrame(mainLoop);

Notes:
• You can substitute "Y" or "Z" for "X" in the code (rotateX).
• "Position with CSS left/top" must be selected in the Document Inspector

CSSTopLeftSelected

2 Likes
15

Thank you so much JimScott…! This is wonderful I appreciate for taking your time to answer my question…

Cheer…

2 Likes