The Secret Plan of Timeline for Sketch

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 systemsand frontend development: The stateful reusable animated UI component.


We’re not designing pages, we’re designing systems of components. — Stephen Hay


🧠 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

 
OFF to the left, ON to the right
 

iOS Switch transition between ON and OFF — Source

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.

 
Stateful, Reusable & Animated — You’ll be able to make this kind of stuff with Timeline

Step 4: Enable exporting components as code. Whether it’s vanilla Javascript, React, Vue.js or native iOS and Android, we will allow transforming the component you carefully crafted into production-ready code. The key here is carefully crafted. By using the timeline to define animated transitions, assign different states and and setup triggers, you basically programmed a component. 


Having designers capable of crafting stateful animated reusable components is a force multiplier. It’s game changing. The consequences cannot be overstated. — Tweet this


💥 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. 

 
How we communicate animations today 

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.


The revolution in the way designers and developers create user interfaces, will be a catalyst to increasing number of technological revolutions in all aspects of life. — Tweet this