This plugin replaces the animation function of SilverTrack to work with css3 transtions, it will provide an stunning amount of performance for mobile devices and even desktop browsers. Note that due the way css3 animations work the option restart({animate: false}) of SilverTrack will not work. It will automatically fallback to javascript animations if transitions are not available in the browser.
This plugin requires Moderniz.transform3d. You will find just this feature in the lib directory of SilverTrack repository but you could use your own Modernizr files.
Options
| name | description | default |
|---|---|---|
| durationUnit | The unit used for the animations. The possible values are: ms and s | ms |
| delayUnit | The unit used for the delay property. It automatically fallback to durationUnit if not set | null |
| setupParent | Configure the css3 properties to allow hardware acceleration in the parent of the container. It might also be done directly through the css file, so this option could be disabled | true |
| setupTransitionProperty | Configure the css3 transition-property to the container. It might also be done directly through the css file, so this option could be disabled | true |
| setupTransitionDuration | Configure the css3 transition-duration to the container. It might also be done directly through the css file, so this option could be disabled | true |
| setupTransitionTimingFunction | Configure the css3 transition-timing-function to the container, it already converts the easing names (easeInOutQuart, easeInCubic, etc) to proper cubic-bezier functions. It might also be done directly through the css file, so this option could be disabled | true |
| setupTransitionDelay | Configure the css3 transition-delay to the container. It might also be done directly through the css file, so this option could be disabled | true |
| slideDelay | The delay used between the transitions, note that delay it is not the same as the duration, this is the time that the browser will wait before the animation starts. It might also be done directly through the css file, if it is the case the option setupTransitionDuration should be disabled | 0 |
| autoHeightDuration | This option configures the duration of the height adjustment animation if the property autoHeight of track is set to true. It might also be done directly through the css file but be aware that this option is correctly configured with the duration of the slide animation, make sure that both will work. It automatically fallback to the option duration of the track | null |
| autoHeightEasing | This option configures the easing function of the height adjustment animation if the property autoHeight of the track is set to true. It might also be done directly through the css file but be aware that this option convert the easing name (easeInOutQuart, easeInCubic, etc) to the proper cubic-bezier function and is configured with the easing function of the slide animation, make sure that both will work. It automatically fallback to the option easing of the track | null |
| autoHeightDelay | This option configures the delay of the height adjustment animation if the property autoHeight of the track is set to true. It might also be done directly through the css file but be aware that this option is correctly configured with the delay of the slide animation, make sure that both will work. It automatically fallback to the option slideDelay | null |
Installation
track.install(new SilverTrack.Plugins.Css3Animation());Using the easing 'easeInOutQuad' in the track with 1s duration
Using a track with mode "vertical" and autoHeight true. Let's configure different options to the animation.
track.install(new SilverTrack.Plugins.Css3Animation({
delayUnit: "s",
autoHeightDuration: 300,
autoHeightEasing: "easeInOutCubic",
autoHeightDelay: 1
}));