Animated Explainers

We present complex narratives in scrolling animated explainers on the web using our extensive experience with web animation and browser based 3D.

Featured examples

Agglayer Visualizer →

Privacy Enhancing Technology Explainers →

What is this?

We take complex concepts and turn them into engaging visual explainers that live on the web.

Why would I need this?

If you are working with dense and complex products that are important but also can send people to sleep then these are VERY useful… and fun

How much do they cost?

Prices start at £7K for development. Scripting, storyboarding & development is on top of this and depends on your own internal resource.

What the hell are you talking about?

Maybe give us a call and we can talk you through some examples.

Get in touch for details

What does the workflow look like?

The general workflow for this is concept, script writing, story boarding, design and then development. We have developed an efficient workflow between those teams that is anchored in an early understanding of the technological opportunities and limitations.

Is this always in 2D?

No, explainers can be in 2D or 3D. both hold benefits, it depends what your subject matter and brand style is.

Do I have to have internal design and illustration resource?

No you don't we can help you find designers to work with. We know great people.

What technology do you use?

For 2D work we use Greensock Animation Platform (GSAP) for its great functionality and ease of use in complex timelines. For 3D work we use React Three Fiber for its unrivaled performance in browser based 3D.

More examples

project

We used new 3D technology to explain a complex crytographic proposal by Meta

A team of cryptographers at Meta are developing a proposal for measuring ads where everyone’s browsing history remains private. They call it ‘Interoperable Private Attribution’ (IPA). Supermarket worked with this team to develop a scrolling 3D animated explainer.

project

We built a scroll controlled animation using GSAP to explain research into how to protect and empower young people when designing digital services.

In collaboration with Craig Walker & TTC Labs, we were tasked with creating a visual explainer for a series of workshops with youth leaders and policy makers in Australia, the United States and the UK. With the brief: How do we empower, protect and guide young people from different communities around the world?

project

We created a scrolling interactive data visualisation for Highland to help new customers understand the fleet electrification process.

As part of the launch of the new Highland brand we created a scrolling interactive data visualisation to help new customers understand the savings they could make by using Highland to electrify their school bus fleet.

project

We built a scroll controlled animation using GSAP to explain research into AI transparency in digital technology.

Designing people-centric approaches to AI explainability by driving greater understanding and agency can help build more trustworthy digital products and services. TTC Labs asked Craig Walker & Supermarket to build a visual explainer as an introduction to the topic and their research.

Is this all you do?

No, we do lots of other things too.

Get in touch to dicsuss those things