tiny-fx.js - a tiny JS Effect Framework


tiny-fx.js [5533b] - tiny-fx-min.js.gz [1394b]


The function t.fx requires only tiny.js and tiny-classname.js. Other scripts are not neccessary.


The function receives an Options-Object and returns an FX-Object which contains different Methods, e.g.:

var myanim = t.fx({
    selector: '#outer[step] .activate, #outer[-step] .deactivate',
    animate: { 
        color: {start: '#000', end: '#foo', easing: 'linear'}
    steps: 25, ms: 60

CSS-Animations can be precalculated. In this case, the animate-parameter can be omitted.

selectorCSS-Selector for the animated Object; [step] and [-step] will be replaced with the step counter class for the animation to and from.
parent[1]A CSS-Selector for the Parent-Object, which will receive the step-CSS-ClassName.
animate[2]An Object with CSS-Attributes to be animated. Each Attribute has the name of a CSS Attribute (CamelCase will be translated automatically).
Static Attributes
{position: 'absolute'}
Attributes in CamelCase vs. Attributes in CSS-Notation
{marginLeft: {start: '10px', end: '20px'},
'margin-right': {start: '10px', end: '10px'}}
Easing as Identifier or Function
{color: {start: '#000', end: '#fff', easing: 'sinus'},
backgroundColor: {start: '#fff', end: '#fff', easing: function(start, delta, s) { ... }}
The values in start and end needs to share the same unit. The floating point precision of the start value, e.g. "10.0em", will be imposed on all steps (short #rgb colors will be extended anyway).
steps5Number of steps
ms30Duration of a step in Milliseconds
repeatnulltrue → repeat Animation infinitely
multiplenullOnly for testing purposes! Allows for multiple Effects on the same parent element
beforenullCallback to be run before the animation.
eachnullCallback to be run after each step.
afternullCallback to be run after the animation.
  1. Optional; will be gathered from the selector otherwise.
  2. Optional, if not present, tiny-fs will assume a precalculated CSS.


Each Animation-Object provided by classyFX knows these methods:


In t.fx.instances befindet sich ein Array, in dem alle Effekte gespeichert sind, um externen Zugriff zu ermöglichen.

there is an Array containing all effect object for ease of access.


Easing is a way to interpolate values (other than linear). The following easing methods are predefined:

These funktionen can be found in t.fx.fn.easing and can be changed or added to. Alternatively it is possible to put an easing function into the easing parameter of the animated Attribute.


This is a small Demonstration of the FX-Framework tiny-fx

Stop | Pause | Resume

tiny-fx allows for multiple effects at the same time.

Stop | Pause | Resume


var demo=t.fx({
    selector: '#demo[step] #sel',
    animate: { 
        background: { start: '#fff', end: '#dcc', easing: 'sinus' },
        color: { start: '#000', end: '#00f', easing: 'halfcos' },
        paddingLeft: { start: '0em', end: '12em', easing: 'sinus' }
    steps: 25,
    ms: 60,
    repeat: true
var demo2=t.fx({ 
    selector: '#demo2[step] #sel2', 
    animate: { 
        background: { start: '#fff', end: '#cdc', easing: 'halfcos' }, 
        color: {start: '#000', end: '#0d0', easing: 'sinus' }, 
        paddingRight: { start: '0em', end: '12em', easing: 'sinus' } 
    steps: 25, 
    ms: 90, 
    repeat: true