We’re just starting with Hype 3 and we’re struggling to create what we think what should be two sequential and simple animation.
The animation is to how somebody pinching on a map to zoom out and spreading their fingers to zoom in.
We have created two timelines underneath the main timeline.
Zoom in. We use two red circles moving to indicate the spread, we have set the start and end positions. We have set the map start and end positions and the animation works fine.
Zoom Out. As above but going in the opposite direction. We know we could reverse the Zoom in but we want to prove the principle.
We can run each of these by selecting the appropriate timeline and starting it. Each runs perfectly well by itself.
What we want it to do is to do one timeline first and then do the second timeline, so it zooms in and then zooms out (the order is immaterial, it’s just having sequences of simple animations that we want).
We can’t seem to create it all on one timeline or in one scene and we don’t think that seems right anyway, we assume we should be create smaller chunks of self contained work. We’ve looked at putting actions on the main timeline that call the other timelines but that doesn’t seem to work. That feels like it’s the right way.
What we don’t want to do is to put a button on the screen, we want this to be seamless and just work for the user.
We attach the doc we have created. It has two timelines, a zoom in and a zoom out and the main timeline.
We have downloaded the tutorials and watched quite a lot of videos, but we clearly have missed some fundamental way of working.
I’m not sure if this is what you’re looking for, but it cycles an animation back and forth automatically. Note I took the animation out of the Main Timeline, and used the On Scene Load setting in the Scene Tab to launch a single animation. I bring this to your attention because there’s a related common new user problem that I most certainly had to ask about, which is how to press a button repeatedly and cycle an animation back and forth (i.e, open/close a slide-in panel for example). This seems to be a related problem. Hope this helps, and don’t hesitate to ping back if you’re looking for something a bit different and maybe we can help!
Ahhhh the changes only appear in the browser, NOT in the Hype 3 editor.
We thought we could see the changes in the editor! We have to preview it in the browser each time.
Is that the case? We thought all the interactions could be seen in the editor. Do we have to preview most things in a browser? Dumb question I supposed
We’ll investigate later tonight or tomorrow. We have a build to get ready today,
If it’s bound for mobile, you can use the Hype Reflect app, which gives you a real-time preview, but, yes, the Preview function is rather important. You can switch to the phone preview by selecting the small triangle next to the Preview glyph once you download the app and tether it to your machine.
And no problem with the response - the forum has saved my bacon numerous times. Don’t hesitate to ask for more help.
It’s bound for mobile, we’re seeing if we can get our help screens and onboarding done with Hype 3.
Now we know that little snippet, life becomes simpler. We had assumed that becuase we could see the main timeline and the transitions, we could see it all. Clearly not
In general, you'll likely want to do this. Hype's editor will play animations on the current timeline, but not any timeline actions. Given timeline actions can do things like change scenes, run javascript, or even send emails, this wouldn't be a nice thing to do when you're just trying to work on animations in a scene! Due to the complexity of interactions and multiple running timelines, you'll want to preview early and often.
A small tip when previewing is that you can use the option key (either on the toolbar item or with the command-return shortcut) to preview the current scene/layout, that way you don't need to necessarily work your whole way through the animation.
We think we have the hang of it now (for some value of think).
We’ve put together a small animation that shows a map moving around, pinching and zooming. We attach it for interest and if anybody else wants to see it working.
Our approach is:
Treat the timeline as a small, discreet unit of work, we were going to say as a procedure or function call but we’re programmers and I’m not sure we should call it that (we are all hardcore C programmers so we think of everything in C and pointers , automatic memory management is for people who can’t keep track of malloc’s and frees’s )
Create lots of small (or larger) timelines and join them together using the actions. Use the main timeline to choreograph the whole sequence but join actions connected timelines together at the smaller timeline level. We use the same zoom out action in reverse and slide action in reverse to get the smoothness of the map moving to and fro.
We hide elements from sub timelines as necessary, e.g. in our case we want to hide a red circle as a slide action involves one finger, whereas a pinch/zoom involves two. This meant that some elements need to be left in place but hidden. We had thought that sub timelines would have their own elements (e.g. like local variables, thats our programming background again). It appears that all the elements are available to ALL timelines in a scene and you have to choose which ones to display or hide.
I think thats enough for us to get going though.
Here’s the animation which shows everything linked together. Comments welcomed but we feel a lot happier now.
A lot of splitting up timelines is an organizational call based on the document. Generally speaking if something is going to always be serial/linear (as in, not dependent on interaction), I’ll just keep it on the same timeline, but that’s me. Other options are breaking into different scenes and always using one timeline.
, automatic memory management is for people who can’t keep track of malloc’s and frees’s 
)