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.
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.
Use the Keyframes plugin to convert an After Effects animation to a JSON file.
3. Add a Video Keyframes layer in Origami.
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.
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.
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.
A Punchcut Perspective
Contributors: Emilio Passi, Jay Jansen