Prototyping Interactive Motion with After Effects & Origami Studio

Mice, game controllers, touchscreens, voice, extended reality — the way we interact with our digital world is more varied than ever before. But when it comes to prototyping, even the most complex interfaces boil down to just two kinds of interactions: instant and continuous.

Instant interactions focus on what happens after user input: the transition that follows a tap, voice command, glance, or other momentary input. Continuous interactions also consider the input itself: a slider, camera, data stream, or other ongoing input that manipulate the UI in real time.

At Punchcut, continuous interaction is key to a compelling prototype. It’s how we make motion interactive. More importantly, it’s how we get precise feedback in testing, deliver persuasive presentations, and align teams with fewer meetings.

We take a variety of approaches to interactive motion, but combining After Effects with Origami Studio gives us the best of two tools: expressive vector motion, and high-fidelity interaction.

1. Animate your transition in After Effects.

Create your tweens without easing. The user will interactively ease the animation as they drag their finger across the screen.

2. Export the animation with the Keyframes plugin.

Keyframes is comparable to Bodymovin and Lottie, but you’ll be able to use the JSON with Origami Studio.

Use the Keyframes plugin to convert an After Effects animation to a JSON file.

3. Add a Video Keyframes layer in Origami.

Tip: Adjust the Fill Style after changing the layer size.

Drag the Keyframes JSON file into the Origami Studio patch editor. Connect the JSON patch to a Video Keyframes layer.

4. Allow the animation to be interactive.

To make the transition interactive, add the Video Scrub Time property patch.

5. Set the animation time range.

Tip: You might see a bug where the animation always resets to the first frame. To work around this, set the Transition End to a slightly lower value (ex: 3.99).

Use a Transition patch to define the animation time range. The End value is the animation length in seconds. You can get the exact length as a patch by selecting Touch > Duration in the video layer.

6. Connect a continuous input to the Transition.

Tip: Use Start Value and End Value to control the swipe distance and direction.

Use a Pop Switch patch to map a swipe gesture to the Transition. The Pop Switch will use the gesture to alternate between the Transition Start and End.

This is just one of many ways you can create interactive motion with After Effects and Origami Studio. You can track continuous input from lots of other sources like Device Time, Scroll, Drag, Game Controller, and the Force value in the Interaction patch. You can also use MP4s instead of Keyframes if you need a higher fidelity animation.

Explore some of these possibilities yourself, or get started by downloading our files from the GitHub link below.

Punchcut/PCT_AfterEffectsOrigami

A Punchcut Perspective
Contributors: Emilio Passi, Jay Jansen

Want the future in your inbox?
Click here to sign up for our monthly newsletter — Future View!