Get element position

Hi,

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?

Tks,
Ulisses

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…

Get_Left_Postition.hype.zip (12.9 KB)

1 Like

Thanks!

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?

Uli

@ulisses

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: RelativeTimelineDemo_JHSv1.hype.zip (19.1 KB) - Demo Here.

3 Likes

Jim,

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!

Ulisses

@ulisses

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.

2 Likes

Hi Jim: I have been going through various Hype examples as part of my way of learning more and I find this example does some magic I do not understand. I understand about the main and GoToCenter timelines, however, I am confused on how hype knows to move the box to the center from anywhere along the main timeline. I see that the GotToCenter is set to move the box from the end its timeline to the center. I figure this is a template path for when the main timeline is triggered with the button. How does the GotToCenter timeline know to change its default start point when button clicked to the point anywhere along the main timeline as it moves the box to the center?

Patrick McLean (o:

I'm not @JimScott but since this is an older thread I thought I'd chime in :slight_smile:

First note that when you start a timeline that animates the same property as another timeline is animating (like a top or left position property), the last timeline started will own the animating that property. Therefore when clicking, the box, GoToCenter takes control.

Second, and more importantly: the GoToCenter timeline uses Relative Keyframes, which means that the first keyframe takes on the current value of the property when it is started. While in Hype's editor the first keyframe will have a value (it needs to show something), in a live document it is determined on the fly.

There's a demo document on that above doc link that also has an example of its usage.

Hi Jonathan:
The more I learn about relative timelines, the more powerful I realize their potential. My other favorite project is the space ships and the cow abduction program. Your example with the engine speeds is perfect for me since I work in the automotive industry as my day job. Thank you very much for your help! Patrick McLean

1 Like

I'm glad those examples helped! The cow abduction was particularly fun for us to make :rofl: . Relative timelines are definitely tricky since there's not a good way to show it in Hype, but we find once people wrap their head around the concept it unlocks a lot of interactivity that would only otherwise be possible with code :slight_smile:.

Hi Patrick!

I'm in the middle of a (permanent) move to Mexico from my home in California and won't be fully reintegrated to the internet for a few more days.

Thanks to @jonathan for picking up the question!

2 Likes