Relative Timelines, but not backwards


(Rick Wolff) #1

I’ve looked at the “Woo Grit” example Hype animation, read and re-read the relevant place in the documentation, and of course read other forum topics, but I can’t figure something out.
relevant video: https://youtu.be/LVSaVZz1Hf8?t=50s
You click on the first element, which expands. When another element is clicked, the first element plays its relative timeline backwards. I’m looking for an example where, when clicked, each element animates to a stop-point in its relative timeline, then resumes when the second element is clicked. How does that work? Are there any examples anyone can show me?
I haven’t tried anything yet, so I have nothing to show. (Maybe a storyboard.)


#2

Check out this example document: http://tumult.com/hype/documentation/3.0/documents/Timelines-Relative-Timelines.hype.zip

In the second scene, you’ll see a series of timelines that each manipulate a single element: a group called ‘Gauge’ which is being rotated on the Z axis. In each timeline (relative or absolute) this element is being rotated. Whether the checkbox is set to be ‘relative’ or ‘absolute’ in the timeline section, you’ll notice that the gauge either jumps or smoothly transitions relative to its current position:

For a bit of a deeper dive, check out: http://tumult.com/hype/documentation/3.0/#absolute-and-relative-keyframes

I’m not sure what you mean here about ‘resuming’…


(Rick Wolff) #3

Let’s say the result of clicking the first button causes a text-filled rectangle to animate out to a readable position. When the second button is clicked, the first rectangle is pushed off the screen in a different kind of animation, as the second rectangle animates on.
It seems to me one of these is necessary (I suspect it’s the first one):

  • One relative timeline has both animations, one after the other, with a Stop marker between.
  • There are two relative timelines for this one button, one for each animation.

Animation using MouseOver and relative Timelines
(Jonathan Deutsch) #4

WooGrit works because each image has a timeline that expands the image, and all those timelines have keyframes that bring back all the images to their starting point. Because it is “relative” if the image is already at its starting point, nothing happens.

WooGrit was made in the days before Hype had multiple chained actions, continuing timelines, and playing timelines in reverse. For example, you could make the same type of animation without relative timelines. Please see this example:

NonRelativeTimelinesEffect.hype.zip (14.1 KB)

Each object runs three actions on click: it will continue the timeline that expands the element, and then continue the other two timelines in reverse.

I suspect this method might be better based on what you’re describing; naming being able to continue timelines. You could likely add a pause timeline action, and then other buttons could continue further to the second point.


(Rick Wolff) #5

This is exactly what I was looking for!

Rather than initiating the exiting elements to play the timeline backwards, I have them continue forward to a different action off the screen. Which might be a clue for the only challenge left:

The very first click of an item initiates all the timelines (or both, since I’ve just done two so far). From the second click on, the animations behave the way I want. Is there some other action to put in the buttons?

woofsloganmenu.hype.zip (1.9 MB)


(Jonathan Deutsch) #6

I would recommend having an On Scene/Layout Load action that uses ‘Go to Time in Timeline’ to go to the last frame, 2.00, for both timelines. Since the continue actions aren’t set to restart, then it is effectively at the end and won’t show up until that item is clicked with the ‘start’ action.