timaline
Timaline is a requestAnimationFrame based tasks scheduler.
To Do
- Reduce RAF Delta impact by "prev or next" frame
- Speed
- Repeat
- User custom loop (manually update)
- Disable RAF when web page is not active
- Playback control
- RAF Delta impact reducing by average calculation
- Reduce RAF Delta aftereffect
Installation
Demo
Features
- Set callback functions
- Wait time in millisecond
- AddClass to a node
- RemoveClass to a node
- Destroy everything
- Control speed
- Control repeat
- Update manually
- Pause when tab is not visible
Browser compatibility
IE 10+
Documentation
Use
var Timaline = ;
Options
You can pass 3 options to constructor, and you can combine them :
var timeline = loop: false // default : true speed: 05 // default : 1 repeat: 3 // default : 0;
Methods
.wait(time)
Wait time.
properties
time
(Integer
)
Time to wait in millisecond
.set(callback)
Call your function.
properties
callback
(Function
)
The fonction you need to call
.addClass(el, classname)
AddClass shortcut.
properties
el
(Node
)
Your dom element
classname
(String
)
Your class name
.removeClass(el, classname)
RemoveClass shortcut.
properties
el
(Node
)
Your dom element
classname
(String
)
Your class name
.destroy()
Roughly destroy your timeline.
speed
(Float
)
Speed will control entire timeline (default: 1)
repeat
(Float
)
Repeat your timeline as many times as you like (default: 0)
Informations
When you set a callback, infos are available :
var delay = ; delay ;
var infos = index: 2 // The index of your task keyframe: forecast: 3000 // Time forecast by set wait time real: 2996 // Real time (with RAF Delta) shift: -4 // Shift between both ;
Examples
Simple task
This example is a simple delayed task, similar as a simple window.setTimeout :
var delay = ; delay ;
Chained tasks
This example is a chained tasks :
var timeline = ; timeline ;
Shortcuts use
If you need, you can use shortcuts methods during your timeline : (consider that the used classes exist in your stylesheet)
var $header = document;var $container = document;var $footer = document; var hidePage = ; hidePage ;
Update manually
This example show how to update Timaline with your own loop :
var delay = raf: false; { delay; ;} ; delay ;
Destroy on the fly
A timeline is destructs when it is finished, but sometimes you need to roughly destroy it before the end :
// Create a new timeline var timeline = ; timeline ; // ..and create a new one that will remove// the first one before its end var destroy = ; destroy ;