The Secret Plan of Timeline for Sketch
GIFs today, Interactive user-interface components tomorrow
We believe that designers should own their design all the way to production. While today’s tools help you communicate with developers, we aim to put you in charge. No coding, but a new generation of stronger visual tools. Imagine having coding skills, without the need to code. That’s what Anima is all about.
🗓 During January 2018, we ran a crowdfunding campaign for Timeline.
The crowdfunding ended successfully and by the end of it, we’ve raised 125% of the target amount. The premise Timeline, is that it adds the ability to create timeline-based animations in Sketch, and export them as GIFs or videos.
☄️ Bigger Plans
Judging by the feedback and funds contributed, that’s already a great product. But we plan to give more power to designers with Timeline, and we’ll share it here for the first time.
👉 From GIFs to Design Systems
Our plan consists of 4 steps, where in each step we advance towards our ultimate goal. The holy grail. The building block of modern design systems and frontend development: The stateful reusable animated UI component.
🧠 Stateful Reusable Animated Component
So what is a “stateful reusable animated component”? Let’s take an example of a UI component that is the iOS Switch.
The iOS Switch has 2 states: ON and OFF
Now let’s go over each property of a UI component:
Stateful — The component manages an inner state. For example, a Switch state can be either ON or OFF. That state is stored in the component, and the component will have a different look, based on its state.
Reusable — The component is self-contained. Meaning it doesn’t have any dependencies that aren’t included within it. You should be able to use multiple instances of a component, and literally just drop them anywhere, and they would work.
Animated — The transitions between the component states can be animated.
📝 Timeline’s Secret Master Plan (just between us)
So how do we make the leap from a tool that enables you to create timeline animations and export as GIFs, into a tool that makes you the hero of the day, everyday?
Well, here is Timeline’s Secret Master Plan (just between us).
Step 1: Build a tool for creating chronological keyframe-by-keyframe time sequence (from left to right) animations. Allow exporting to GIFs as first use-case, and improve user experience of using the tool for crafting animations.
Step 2: Introduce exporting animations to other formats such as CSS for web and Lottie for iOS and Android.
Step 3: Rename keyframes into states, and enable transitioning from any state to any state, not in any particular order. Instead of only having time-passed as the event that trigger a transition, introduce new triggers such as mouse clicks, touch events, hovering, etc.. In short, by this point we have an interactive component in our hands.
💥 User Experience Create Revolutions
Take for example the iPhone or Uber. The game-changing innovation in these products is the user experience. Smartphones existed before the iPhone, yet it took Steve Jobs to create a user experience that sparked the mobile revolution. Uber offered a 1-click reliable way to get a ride, and had explosive growth. Coincidence? We think not.
The time and money spent today in communication between designers and coders and grunt work will be saved, allowing more time to ideate, iterate and perfect new and even more innovative user experiences.
No more frustration when mockups aren’t being coded in a pixel perfect way. No more hand waving when trying to explain how an animated transition should behave. Developer Guess Work would be a thing of the past. It’s time for the era of creativity, rather then grunt work.