Ponies & Light



A playlist-based animation library for openFrameworks. Developed over a couple of years and used in a growing number of permanent installations, deployed on OS X, Windows and Linux.


ofxPlaylist makes it easy to describe complex animations in code. It is useful, whether you want to tween values in sync or in sequence, tween stuff triggered by some user-generated event, or want to keep your update methods clean in complex projects. Think of a button that changes shape and then fades out when clicked. Or an animated character who first raises an arm and then nods its head. In the past, ofxPlaylist has animated puppets, pufferspheres and pirates. And, so I’ve been told, some people use it on iPhone projects.

Key Features

  • “Penner” Tweens
  • NEW: Bézier Tweens
  • Pause
  • Trigger Keyframes
  • Frame-based or time-based
  • BRAND SPANKING NEW: Tweens can be delayed before execution.
  • Sequencing
  • Grouping
  • Thread-safety


Here’s the source code: http://github.com/tgfrerer/ofxPlaylist

This includes two example projects, one of which is intended for beginners.

Example Projects

It’s much more fun to poke around an example project and see how it all works! ofxPlaylist comes with 2 example projects. These show off some of the most useful features. Best start with a simple example. You can find it here:


Then move on to the advanced example. It is a massive show-off of almost everything. Think North-Korean military parade. Approach with care. If you must:


Reference Render

imageExhibit 2: This is a screenshot of the advanced example app. Every click animates a random rectangle.


Look at the simple example project of how to get a basic setup running. Here’s a code snippet to show a most common use case:

// -----| testApp.h
#include "ofxPlaylist.h"

ofxPlaylist playlist1;

// -----| testApp.cpp


void testApp::update(){
        playlist1.update();        // this is where ofxPlaylist does its magic.

void testApp::mouseReleased(int x, int y, int button){
        using namespace Playlist;

        // say we want to tween the x and y values of some ofVec3f myPos

        playlist1.addKeyFrame(Action::tween(1000.f, &myPos.x, 400.f));
        // this will take 1000ms to tween myPos.x from
        // its current value to the target value 400.f

        // will then pause 500ms

        playlist1.addKeyFrame(Action::tween(500.f, &myPos.x, 100.f));
        playlist1.addToKeyFrame(Action::tween(500.f, &myPos.y, 200.f));
        // will then take 500ms to tween myPos.x and myPos.y in sync 
        // towards 100.f and, respectively, 200.f
        // Note the use of addToKeyframe() vs. addKeyframe():
        // addToKeyframe() is useful if you want to stack up Tweens,
        // so that they get executed in paralell.

FAQ: Is there a GUI?

Nope. ofxPlaylist is here to create animations dynamically, when responding to user inputs.

There is, however, a helper header file which allows you to import AfterEffects XML timelines. Neat, huh?

If you need a GUI and want to load, edit and save static timelines within your openFrameworks app, I recommend checking out the excellent ofxTimeline by @obviousjim et al.

FAQ: Is there a way to save Playlists?


FAQ: How does it work?

Glad you asked. Let’s start with the basics, and then wade step by step into the quicksand of some more complex (and gory) details:

A Playlist is a list of Actions that need to happen in sequential order. These Actions are grouped together in Keyframes.

imageAnatomy of a Playlist: Keyframe (①). Playlist (②).

All Actions within a Keyframe start at the same time and execute in parallel. A Keyframe is done, when all its Actions have finished. This Keyframe is then deleted, and the next one starts.

imageA most basic Playlist: Keyframes boundaries marked in red. This will take 200ms to tween 'a' from 300.f to 0.f, then take 1000ms to tween 'a' to 50.f, then take 50ms to tween 'a' to 0.f

You can push additional Keyframes to the end of a Playlist at any time. You can also clear Playlists anytime.

Each Keyframe holds one or more Actions. These can be any of the following three:

imageTypes of Actions within Keyframes:TweenPauseEvent

When a Keyframe begins execution, all its Actions start in sync.


♥ openFrameworks >= 0071


ofxPlaylist is released under the MIT License.


Unit 3, 410 Hackney Road,
E2 7AP London, UK