This is a message.

Plugin Animation

Fine grained animation control

standalone demo

Animation Properties

Element you want to animate




The idea for animations was taken from YouTube where the video screen animates to the top left corner and video suggestions are shown from under the screen. We took this possibility to the next level. You can animate each possible element in the player and you can make your own plugins and animate those plugins as well. The timing of those animations can be controlled either via events fired by the player or using cue-points.

Examples

Here are few examples of how animations can be done:

// animate few screen properties in 1 second
$f().getScreen().animate({width: "100%", top:200}, 1000);
 
// trigger custom function when animation finishes
$f().getPlugin("content").animate({top:10, opacity:1}, function() {
 
// this- variable points to current plugin
this.setHtml("At this point video starts to be exiting");
});
 
// set up animation to be happening on the last second of the playback
$f().onLastSecond(function() {
 
// here this variable points to the player instance
this.getScreen().animate({width:'50%'});
});

JavaScript