Skew setting & animation

Animation
1

Hi there!
I would like to be able to configure and animate skew on elements.
I don’t see this in the GUI so I assume it isn’t supported. Is there any other way I can manually specify this? Maybe as a CSS statement for each keyframe?

Happy to use a workaround if one exists.

2

(Hype v4 contains an inspector item to skew elements and animate the skew property. You’re welcome to apply for the beta and let me know if you have done so and I can send you an invite!)

Otherwise this can be done in v3 with some steps and code.

  1. Check “Position with CSS left/top” in the Document Inspector
  2. Uncheck “Use WebKit graphics acceleration” in the Document Inspector
  3. Select your element and assign it an ID (I’m calling mine “mybox”)
  4. Click “Edit Head HTML” in the Document Inspector and add code like:
    <style>

#mybox {
    transform:skew(20deg, 20deg);
    transition: transform 2s;
}

</style>
  5. To animate (which will be for 2s as specified above), add a timeline action set to run javascript, and use this code:
    hypeDocument.getElementById("mybox").style.transform = "skew(10deg, 0deg)"
3

That’s great. I’ve just submitted the beta application.
On another note - is there a way to set a keyframe to go to a specific time or frame on a video? I can see that there are keyframes available in the time line but can’t see what to do with them.

4

Invite sent!

There's no built-in feature for this; the way to do it would be:

  1. Give the video element a Unique Element ID in the Identity Inspector
  2. Add an action triggered by what you'd like (mouse click, timeline action) etc. that is set to Run JavaScript… and use code that looks like:
    hypeDocument.getElementById("myVideo").currentTime = 1.5; // time in seconds