Radical

Anything in, anywhere out

Radical is a 12kb JavaScript UX framework. Use it for for animation, physics, and input tracking.

It provides DOM support for ease-of-use, but provides the ability to work with raw numbers and custom callbacks for total creative freedom. On the web, on the server, anywhere.

Download | API | Guides | Twitter

Flexible

• Animate any property without waiting for explicit support via custom callbacks.
• Seamless hand-off between user input, animation and physics.
• Work with your favourite technology or framework (DOM, Node, jQuery, Canvas, Three.js, WebSockets etc).

Extendable

Develop your own:

• Easing: Easing functions and bezier curves.
• Physics: Add new physics simulators.
• Element types: Handle different types of element (DOM, Canvas shapes etc) with the same API.
• Value types: Automatically split special values in child values (ie "#000" -> { Red: 0, Green: 0, Blue: 0, Alpha: 1 }.
• Input: Create custom Input interfaces for Oculus/Leap/anything.
• Value routes: Output values of a certain type (ie attr, css) in a standardised way.

Peformant

• Uses and exposes a single requestAnimationFrame thread.
• Never hits the DOM, leaving you in total control of performance.
• Over 20% smaller than Velocity.js, 72% smaller than GreenSock TweenMax. Boom shak shakalaka.

Get started

Change log

Cowabunga adheres to Semantic Versioning.

[0.0.1] Unreleased

Note: Forked from Redshift v2.1.1.

Changed

• redshift object name now UI.
• Terminology changes to fix API semantics:
  • Action: Actor
  • ActionGroup: ActionGroup
  • Rubix: Action (as in, an Action an Actor can perform)

Added

• Add new easing functions with Redshift.addEasing(). Provide the easeIn function and Redshift will generate easeOut and easeInOut variants.
• Add new simulation functions to run with Redshift.newSimulation().
• Any value can be a special value type, ie a color. '#FFF' splits into four numerical properties, Red, Blue, Green and Alpha.
• Add new value types with Redshift.addValueType().
• Any Actor can be a special actor type, ie a DOM handler.
• Add new actor types with Redshift.addActorType().
• HSLA value type support.

[2.1.1] 2015-06-11

Fixed

• Change Action rubix from "seek" to "play" onEnd.

[2.1.0] 2015-06-11

Added

• Added .seek() method to Actions.

[2.0.5] 2015-06-02

Added

• ActionGroup returns array of values when a getter is called.

[2.0.4] 2015-06-01

Fixed

• onStart regression from 2.0.0 - only firing for 'values' route.

[2.0.3] 2015-06-01

Fixed

• Fixing hasChanged regression, prevented .run() from stopping automatically.

[2.0.2] 2015-06-01

Fixed

• Adding Alpha property to all split color values (default: 1), in case a value has mixed RGB and RGBA properties.

[2.0.1] 2015-06-01

Added

• CSS values travelling through a splitter (ie backgroundColor is split into RGB values) can be set as functions like normal values.

[2.0.0] 2015-06-01

Changed

• Upgraded stepped easing algorithm.
• Action.hasChanged set to true when Action.isActive(true)

Removed

• .props() method removed - properties now saved directly to Action object.
• .data() functionality removed, just set properties of Action instead.
• .flip() is now .flipValues().

[1.4.1] 2015-05-31

Fixed

• ActionGroup.stagger() wasn't returning this

[1.4.0] 2015-05-31

Added

• Action Groups for controlling multiple Actions at once.
• Stagger method for Action Groups.
• DOM selection support for creating Actions prepopulated with DOM elements.

Fixed

• Calling .play(preset) while Action was in progress failed to add that call to the play queue.
• Added check for Process timers before clearing as clearTimeout is costing ~.4ms.