tiny-fx.js - a tiny JS Effect Framework

Download

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

Hint

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

Usage

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.

Name	Default	Meaning
selector		CSS-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).
steps	5	Number of steps
ms	30	Duration of a step in Milliseconds
repeat	null	true → repeat Animation infinitely
multiple	null	Only for testing purposes! Allows for multiple Effects on the same parent element
before	null	Callback to be run before the animation.
each	null	Callback to be run after each step.
after	null	Callback to be run after the animation.

Optional; will be gathered from the selector otherwise.
Optional, if not present, tiny-fs will assume a precalculated CSS.

Methods

Each Animation-Object provided by classyFX knows these methods:

.run() - Start the animation
.stop() - Stop the animation completely
.pause() - Pauses the animation
.resume() - Resumes the animation
.destroy() (only if CSS code was generated) - remove the CSS

Instances

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

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

linear
easein
easeout
easeboth
halfcos
sinus

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.

Demo

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

Source

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 
});
demo.run();
demo2.run();