Change timeline properties through Javascript

Using JavaScript with Hype
1

Hi all!

Is it possible to change certain timeline / tween properties through JavaScript.
So let’s say I have a Cube that spins 360 degrees in 1 second (timeline). And I have a button that randomises the rotation. When I press the button the Cube now spins a random number of degrees (0 - 360).

A follow-up question would be: is there a way to tween objects using the Hype-JS-library directly (so without the timeline)?

2

short answer yes.

If you are looking to programmatically change the rotation then you can access the transform property like so

element.style.transform = ...

So, maybe in your case you can do something like this in a function on click

var randNum = Math.floor(Math.random() * 360) + 1; // generates a random number between 1 and 360.
cube = hypeDocument.getElementById('myCube'); //points to your element with an ID of "myCube"
cube.style.transition = "transform 1s"; //this animates it over 1 sec
cube.style.transform = "translateX(100px) translateY(100px) rotate(" + randNum + "deg)"; // The setting for the transform property of your element to spin on the z axis randomly. You can add the rotateX and rotateY values in the same way. Note the translate values must be the same as your left and top position in Hype scene otherwise the element will go to the 0,0 corner
1 Like
3

Hi!

You made a little typo there (translate Y instead of translateY), but it works like a charm! Thank you!

Is this documented somewhere, so I can have a read? I can imagine you can also change things like easing and others animation properties.

Thank you once again!

4

Ya get what I mean :slight_smile:

These are basic CSS techniques but put in Javascript form.

I think http://w3schools.com has some good examples.

element.style.transitionTimingFunction = "ease-in-out";

would be a way to change the easing

1 Like
5

I sure do :slight_smile: It’s wasn’t meant as a rude comment, just a tiny remark for people who might blindly copy-paste your code :slight_smile:

I haven’t looked that much into CSS animations yet, so that might be why I missed the reference to the basic CSS techniques (I always use(d) JS for animation). I’ll definitely have a look then.

Once again thanks, thanks, thanks!

6

no worries. Thanks for pointing it out. On the link I gave just look out for “Javascript Object Syntax” to see if you can use it :wink:

1 Like
7

Note that you can use Hype’s animation system to animate properties in a similar manner to the CSS Transitions shown above. When using the Hype runtime, Hype is aware of the changes which might be required depending what else your animation is doing (like if there are other timelines/actions that may affect the elements).

You can feed values like:


var randNum = Math.floor(Math.random() * 360) + 1; // generates a random number between 1 and 360.
cube = hypeDocument.getElementById('myCube'); //points to your element with an ID of "myCube"

hypeDocument.setElementProperty(cube, 'rotateZ', randNum, 1.0, 'easeinout');

See the Setter API documentation.

3 Likes
8

I forgot about the “rotateZ” in the setter API. However being a “cube” animation it would be better to have the rotateX and rotateY too. :wink:

1 Like
9

Thanks for the info all, I’m gonna see if I can get it to work. I’ll let you know asap!

10

Hi All,

It works! However, I have the following issue. As soon as I resize my window so that a different layout triggers, the animation stops. If I make a time-line animation, I can switch between layouts without any problems.

Is there a way to force the animation to continue on a layout-switch? Or is there a way to change the properties of a timeline animation?