I want to make the following, and I’m curious if it’s possible to do in Principle?
I want to have a timer; which goes from top to bottom of the screen (total time f.e. 15min)
Based on the timer; some animations starts to play (the one where the timer-line is passing)
And then…
If you are too slow, you can just drag the timer up to continue from there.
Or you can can ‘scroll’ through the whole timeline to scan the recipe in a glance.
First off, that is an awesome way to visualize cooking directions. Did you come up with it?
So with this (as with all prototypes) it’s good to ask “what is the minimum needed to get the idea across, and how much can I fake?”. You’ve already got a very clear demo of the idea, so If you can just tell folks that the timer goes on its own and can be reset by dragging, then job done, you can move on to other more important work.
Now for the real answer:
To get the timer going on it’s own, I would make two artboards with an auto event between them. On the starting artboard, the dark timer layer is covering the screen, and on the ending artboard, it’s positioned off the bottom.
If you want the little sub-animations to loop, like the water boiling, you could put those in components.
I’m not sure how you could drag back to a specific spot in time. To make it go back to the start when you drag, you could put a drag event on the second artboard that takes you back to the first artboard. This would start the animation over when you drag. That would be enough to get 99% of the idea across, and would demo well because you could just drag your finger back to the start each time. If you really need to show dragging back to a point in time that isn’t the start, you could make the drag event go to a 3rd artboard with the timer at the halfway point, and that 3rd artboard has an auto event back to the second artboard.
Thanks for both your answers. Really appreciated. I gave me the directions in which way I should look to a solution.
(Yes, it’s my own project. For more recipes you can checkout Cooktus.com)
Goal of prototype
Good question. My goal in the first place is not to ‘get the idea accross’, i wanted to experience my own idea. (To feel if it creates much more impact that a static illustration or a movie). But I can guess I can kind of experience that with the ‘real anwer’
The real answer
I would go for a solutions you can go step-by-step (every cooking action). That’s even better then just random dragging.
The problem I walk into is that the ‘auto’ timeline animation and the ‘drag’ animation (back to previous artboard) becomes the same. I want the first animation 8 sec. The back animation 0.1 sec. If I change one, the other changes too. Is that how it suppose to work?
Animation timing for a transition is stored in the destination artboard, so when you break the animation up into sub-steps, going back is gonna be slow – as you experienced. That’s why I recommended doing it in a single auto animation between two artboards; that way one artboard can have the restart timings, and one has the normal speed timings.
