Get element position


I have an element moving on screen and when user click on it (calling another timeline), I need to move the element to the center of stage.

Is there a way to know where the element is on click and continue animation the position from there?


You could use Hype’s “getElementProperty()” function to get the element’s current position upon each click.

var x = hypeDocument.getElementProperty(element, 'left')

hypeDocument.getElementById('position_Left').innerHTML = Math.round(x);

Here’s an example… (12.9 KB)

1 Like


But can I write back the position_Left to use as the initial keyframe in timeline?

I mean, start animation at position_Left and goes to the screen center when user click the object?



Another idea - but I’m not sure if I understand what You want - use “relative” timelines.

Set up an initial motion for an element - I’ve used the “Main Timeline” in my demo. An “On Mouse Click” event on the rectangle triggers the second timeline “GoToCenter”. This timeline has a relative starting point based on where the rectangle is moving on the “Main Timeline” when it is clicked. The second timeline moves the rectangle to the center point, as defined in the the timeline “GoToCenter” (using left & top positioning).

Hype Project: (19.1 KB) - Demo Here.



That is exactly what I need, I must read the whole Hype manual! But I’m in a hurry to delivery a project this week :slight_smile: I started with Hype only 5 days ago :slight_smile:

Thank you so much!



5 days… You’re smoking’ it!

You might find “A Book about Hype” very useful in providing an overview of Hype that will quickly get You up to speed. This book is written by Michael Garafalo (@photics) a regular contributing member of this Forum. I found it a valuable resource for learning Hype.

Best of luck on your project.