The video above is an iPhone screen capture taken from Reuters TV, an on-demand news app created by one of the largest news agencies in the world.
Unlike most news apps I use, it doesn’t suck. In addition to sporting elegant, real-time graphics and transitions, it packages news in custom-sized feeds that I can view while riding the subway. It’s delightful, even if the news I’m watching isn’t.
Product shot from the Reuters TV site (designed by UENO)
The more I used the app, the more I wondered who had created it. The ensuing hunt led me straight to a bona fide unicorn — that rarest breed of motion designer capable of working across both halves of the brain, logic and poetry in equal parts.
His name (yes, unicorns can be male) is Marcus Eckert. Our chat below is full of illuminating insights, starting with the Reuters TV app and then moving on to broader territory.
If you’re remotely interested in coding, you’ll definitely want to read this. His thoughts on the accessibility of coding and tools for motion designers are especially important — and encouraging.
Code and motion: A Q&A with Marcus Eckert
What was your role on the Reuters TV app?
I was and still am a front-end developer on the project and did most of the animations, transitions and interactions in the app. I also got to do a lot of traditional, pre-rendered motion for ads, internal pitches, the web part of the project and the opener and closer for Reuters Now.
The Reuters TV app was created through UENO, correct?
Actually, most of the people working on the project are Reuters folks. Regarding the code for the app itself, it was a mix of lot of people doing front-end and back-end stuff. Haraldur “Halli Thorleifsson, who is the founder of UENO, did the design for the app and a lot of stuff around the app (web, ads etc.). I’m self-employed, though, and don’t work for either Reuters or UENO.
Most news apps are terrible, especially ones from huge corporations. Somehow, Reuters TV is elegant and engaging. What did you guys do to help make that happen?
I think this is mostly due to how the project internals are set up and that the hierarchy for this particular project is very flat.
Isaac Showman, our product manager, put a lot of trust in the team. We weren’t boxed into our respective fields but were encouraged to speak our mind regarding the features, the workflow, the animations and everything.
And it is very much possible to argue your point to him and get it through. He would often also solicit our opinions on various things, and he also seemed to have a great relationship with Reuter’s CEO, who in the same way trusts that we know what we’re doing.
So the app didn’t have to go through a whole chain of command, get watered down and focus-grouped to death. The management really knew how to rely on each team member’s individual strengths and made decisions based on merit and not on ego. But having a great team also helps.
Under the hood
For a while now, you’ve been working on an animation/interaction library called Meek. Can you explain what it is to non-coders?
All of the stuff you see on your phone’s screen is typically done by writing code for a UI framework. So, if you want to draw a rectangle, you might just add a line of code telling the phone to create a rectangle.
The framework takes this command and does the hard work for you, because the rectangle is really four points in a coordinate system that have a shader attached to them and so on and so forth. So the framework strips away a lot of the complexities of dealing with lower end calls to the graphics card and the CPU.
Meek is such a UI framework.
And when you’re making a framework, you need to know your audience, know where to strip away complexity, where to reduce options and where to still leave people with opportunities to customize.
UIKit, Apple’s UI framework, that most non-game apps for iOS are built on, has to cater to a large audience of developers and make a lot of things possible. So sometimes they have to prioritize ease-of-use over performance or customizability. Meek tries to facilitate making custom objects (such as a rectangle whose corners can bend or something) and has a lot of ways of creating animations.
I made it to help me realize the things I want to realize. It’s also a lot more performant than UIKit, because it doesn’t have to do everything and also allows me to change a lot of low-level calls to fit specific situations.
Did you build Reuters TV with Meek? Or maybe use it for prototyping?
No. Meek is not in there.
I actually did use it a lot in the beginning and wrote a lot of the video transitions for it. So we had a ton of this built but then ran into quite a number of technical problems trying to fit it into Apple’s video rendering workflow. The fact that the videos have to be streamed created a lot of headaches for us and ultimately forced us to abandon custom OpenGL solutions altogether.
But more than just a collection of specific code, Meek in my mind is also a set of ideas on how to animate objects and how to achieve certain interactions. And I’ve rewritten some of these ideas to work in Objective-C and with UIKit. I’m now also applying these ideas while rewriting my website.
Did you start building Meek while you were making your iOS game, Wide Sky?
Yes, inadvertently. I was using Cocos2D (a framework to make games) in the beginning but then realized that it didn’t allow me to do what I wanted to do. I started hacking it and over time this hack became more and more elaborate, replacing most of the Cocos2D core.
After the game was done, I rewrote the framework from the ground up in C++, mostly in order to rectify mistakes and get rid of all the makeshift hackiness.
Wide Sky seems like it was a very successful title. Was it?
Ha. Well, financially it wasn’t very successful. But it gave me the chance to pivot towards a more code-centric career, has helped me get a foot in the industry and gave rise to a lot of related opportunities.
If I’m understanding your work correctly, you hop back and forth between doing what I would call traditional, pre-rendered motion design (in After Effects) and doing real-time motion design for mobile platforms.
Do you see a relationship between the two practices? Does one inform the other?
Absolutely. When coding, I benefit a lot from my experience as a motion designer.
When you hand off an animation to developers, you often see that things get lost in translation. Often times, they fail to capture this very specific feeling that you’re trying to invoke.
In my mind, the curves and keyframes you set in AE are far from coincidental, and slight deviations can very much ruin the experience. Knowing about curves, about keyframes and easing and just motion in general very much helps me craft interactive experiences that retain the feeling I was going for — or that’s the goal at least.
And complementarily: when you know about code and the limitations that come with animations and interactions having to run at 60fps on limited hardware, you know what to look out for when mocking up an interaction and not to go overboard in AE. Often times, I see a lot of AE-made interaction mockups online where you could just tell that this would never work in an actual interactive setting.
I also still draw a lot of inspiration from just watching videos, doing the same stuff I do before making a video, trying to see how the animations could be adapted and made interactive.
Do you prefer coding to setting keyframes in AE? Why or why not?
I would miss not being able to work in AE from time to time, but I do prefer coding nowadays.
It’s more challenging, but I also feel like there are a lot of things still to be made and to be discovered, especially when it comes to crafting interactive experiences that focus on motion and novel interactions. There is still a frontier to be conquered when it comes to code and motion.
It’s also a lot easier to change things in code. Change requests in an elaborate AE project can be quite daunting and unravel into just mindless tedium, at least sometimes. But watching stuff on Vimeo also often gets me pumped and excited to go back into After Effects.
Learning to code
I’ve spoken to many motion designers who feel anxious about interactive/interaction design. They’re interested, but they feel intimidated by the necessity to code. It seems many motion designers have a mental block against coding. Do you agree?
I do agree, and I get the sense that a lot of developers also like to perpetuate this notion of coding being hard in order to elevate what they’re doing.
Talking about code has become so codified in itself that I sometimes have the feeling it’s designed to intimidate and ward off beginners. But at the end of the day, it really is just another way of expressing yourself. Literally another language.
You don’t have to be good at math and you don’t have to be particularly smart. It helps, I imagine, as it does with all thinks in life, but it’s not a prerequisite.
Do you feel we need new tools to get more motion designers into working with interactivity?
Yes. But I always encourage people to start coding because tools necessarily come with boundaries attached.
Our creative vision will be limited to what the tools allow us to express. You can’t have a spring animation without having a spring animation tool. By relying on readymade solutions, we become dependent on third parties and their ideas of what we should be able to express.
That might not be so bad in the world of pre-rendered graphics, but the whole interactivity paradigm as we experience it today is a lot younger and the boundaries of the tools that we have are still fraught with restrictions. Coding gives you agency and allows you to actually realize your artistic vision rather than adapting your artistic vision to the tools that you have.
Even in pre-rendered graphics, you often see that the really advanced stuff is being done with custom tools and custom solutions because the people at Adobe or Autodesk just hadn’t yet thought of that particular problem before.
With Carpet Mesh Builder (above), it appears you’ve built an animation tool of sorts. Is that something you’re planning on releasing?
It was mostly a test case to build my framework around.
I had an animation in mind that I wanted to achieve but felt like it was too complex to do it all in my head and all in code. So I thought it’s a good opportunity to build a GUI around it and develop my framework around the problems that would arise.
I did end up liking the animation but didn’t actually have a use case for it.
If money and time weren’t an issue, what would be your dream project?
I don’t really have any dream projects, because I feel like I’m doing what I want under more or less the terms that I want. I do very much realize that I’m insanely lucky in this regard.
A couple of more forgiving deadlines or clients in my time zone would be nice, but other than that I always felt that if I really wanted to do something, I would make the time. And so far I have. If I couldn’t make time I probably just didn’t want it enough.
That said, working a bit more on the framework would be nice. But my next project might actually allow me to do just that.
If people would like to follow developments in Meek, how should they do that?
Probably on Twitter but I also have a blog where I sometimes post stuff that I’m working on: https://marcus-experiments.tumblr.com/
Special thanks to Erica Gorochow