Skip to content
Demo application of the `friz` Animation system for JUCE
C++ C Objective-C++ Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
Builds Add application icon Sep 5, 2019


Fall 2019 * Bg Porter

A generic UI animation controller for JUCE projects.

For a fuller discussion of these classes, see my blog post at


The friz project is a set of C++ classes that can be used in projects built with the JUCE application framework to add animation effects to user interface elements.

It's named after Friz Freling, animator and director of Looney Tunes/Merrie Melodies shorts in the golden age of the Warner Bros. animation studio.

Design Goals

  • Lightweight If no effects are being run, there's no runtime overhead.
  • Flexible Adding new types of animation curves is simple, typically only requiring the creation of a new C++ class derived from an existing effect type and the overriding of a single method. Client code provides a pair of lambda objects to receive updates on frame updates and effect completion.
  • Decoupled Friz doesn't need or want to know anything about your application ; it just sends your code back a stream of values at regular intervals.
  • Modern Written using current (C++11 and later) capabilities and techniques.



Top level animator object, typically owned by a JUCE Component object that needs to animate some aspect of one or more child components.


An individual instance of a set of animation data. Each animation can provide one or more sets of animation curve data that will be sent back to your code on each frame. A derived class friz::Sequence is used to chain multiple animations together as a single logical unit.


Base class for a set of animation curve types that can be instantiated with a start/end value and the definition of when the end value has been reached, either a set number of frames/time duration, or a floating point tolerance.

Currently Defined Curves

  • Constant—emits a stream consisting of the same constant value
  • Linear—interpolates linearly between start and end over a set number of frames
  • EaseIn—accelerates quickly away from startVal, decelerates as it approaches endVal
  • EaseOut—accelerates slowly away from startVal, accelerates into endVal
  • Spring—accelerates away from startVal. If it overshoots the endVal, will simulate the oscillation of a dampened spring around the endVal until within tolerance.
  • Sinusoid—generates sin/cos values between any two phase values

Demo application

The included demonstration application performs simple animations that

  • apply each of the curve types to animate randomly sized & colored squares away from a mouse click.
  • after a delay from the movement animation, fade the square to invisiblity and delete it from the screen.

The control panel on the right can be hidden and shown by clicking on its gray border (and is itself animated). All of the animation parameters can be tweaked and played with using the sliders in the control panel.

Additionally, a 'show breadcrumbs' checkbox controls the display of a point on the screen indicating the position of the last square on each frame of the animation—very helpful for visualizing how each of the curves actually behaves.

You can’t perform that action at this time.