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).
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.
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?
I'm not @JimScott but since this is an older thread I thought I'd chime in
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
I'm glad those examples helped! The cow abduction was particularly fun for us to make . 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 .