Hello! (First, great to find the space!)
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)
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.
In this example a made everything based on drivers. By default the timer should play by itself (instead of scrolling, what I do now)
I hope my questions is clear. And I even hope more that’s is possible.
Welcome to the group!
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?
(i experimented with tap and drag)
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.
“Animation timing for a transition is stored in the destination artboard” Now I understand what’s happening.
I’ve been playing around with your solution.
Two question about it:
If I recreate your solution, it works. Only thing is that it ‘bounces’ quite a lot. What can I do to make it less bouncy?
I works. But I don’t really get what’s happening. (maybe because of question 1)
And why doesn’t work anymore after the timer is halfway?
Maybe those questions are too ‘beginnerish’.If there are any tutorials/source files, to figure this out by myself, i will be happy too
Thanks a lot for the help!
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.