Making both the start frame AND the end frame relative?

Animation
1

I get the purpose of the relative start frame option in a timeline, but is there any way to make the end frame relative too? Say you want to achieve something like this: a click on an object causes it to jump up and return almost to the same point; you want to be able to achieve this effect no matter where the object is in the scene, ie falling back close to the relative start-frame position.

I’m guessing this is common requirement, so I’m sure I must be missing something obvious. How do you do it?

Thanks.

2

the option may be to use hypes API …

you can get and set properties like ‘top’ of an element.

so get the top, substract the value of your choice, set the new value with a duration, set the old value after duration …

1 Like
3

Yes, Hans, I was coming round to thinking of Javascript. I’m OK with that, but I just thought I’d check whether the Hype UI could do it.

Thanks.

4

In case anyone is interested the relevant JS code is …

var topOfElement = hypeDocument.getElementProperty(element, 'top');
	
	hypeDocument.setElementProperty(element, 'top', topOfElement - 50, 0.5, 'easeout'); // rise by 50 px
	setTimeout(restoreTop,500);  // 500 mS for element to rise by 50 px
	
	function restoreTop() {
		hypeDocument.setElementProperty(element, 'top', topOfElement, 0.5, 'easein');
		}

You can’t just run two setElementProperty calls in succession (one with -50 pixels and the other +50 pixels) as the second one will be executed before the first has really got going and the element will just drop 50 pixels. Hence the need for the setTimeout() with a delay equal to the time spent easing the element upwards. The second (time-delayed) call of setElementProperty just uses the original top value as this parameter is loaded immediately after the first call (ie the value of ‘top’ is the original value).

This all works fine: the element jumps up 50 px and then drops down again.

1 Like
5

Depending on your needs, you could do a Continue Timeline action set to playback in reverse. This would mean your first keyframe would be your last, and assume the relative position that was set when the timeline was originally started.

6

RelativPingPong
RelativPingPong.png1349×487 54.1 KB

Visualization of the symmetry involved and how playing in reverse makes the first and last keyframe relativ …

Here is an example for @jonathan suggestion. Only downside the symmetry includes duration and intermediary steps (if used) …

RelativPingPong.hype.zip (18,8 KB)

1 Like
7

hm, but you could not achieve the same result as @beemerbiker! or?

8

Well the title says “Making both the start frame AND the end frame relative?”. What @beemerbiker is then doing in the script is ALL relative. That is only possible with script or by introducing a wrapper group to move the whole thing around… example:

RelativPingPong_Movable.hype.zip (20,1 KB)
Drag black square! To move the whole thing around but that obviously also could be a key framed animation

PS: Just realized I was using the german pronunciation “relativ”… it needs that extra “e” in english :wink:

1 Like
9

you're right, that should work :slight_smile:

10

Thanks for the various useful suggestions. Very helpful. For my particular application, in the end the JS function technique suits me best. It can be done in 3 lines of code and it will work with any element in any scene with no edits (assuming you need a 50px up and down jump lasting 1 second each time). The trimmed down function code I’m using is …

var topOfElement = hypeDocument.getElementProperty(element, 'top');
hypeDocument.setElementProperty(element, 'top', topOfElement - 50, 0.5, 'easeout');
setTimeout(() => hypeDocument.setElementProperty(element, 'top', topOfElement, 0.5, 'easein'), 500);

Thanks again.

11

you could use data-attributes on the element to be variable with distance and timing too ...

1 Like