-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Advanced Sequences
- NOTE: This documentation is for Velocity v2.Sequences are the new way to provide a more complicated animation to Velocity. Like a CSS animation they can provide multiple overlapping animations of different properties, and can also provide a default duration that is different to the global Velocity default duration - see the registerSequence command for how to create them.
When a sequence is reversed it will play backwards as a perfect mirror to playing forwards, including any easings on individual steps of the animation sequence.
All sequences have a name that can be passed to Velocity in place of the propertiesMap object, the same way as an action command - this does mean that you need to not overlap a new sequence name with a valid action - the action will take precedence.
NOTE: While value functions are usable for normal animations, at this point in time there is no support for them within sequences.
The animations from the excellent animate.css have been converted to sequences and added to the velocity.ui.js (and velocity.ui.min.js) file. The UI-Pack now only contains these sequences, so is not needed for any code, and as such it's perfectly permissable to only choose the animations you wish to use.
bouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflashflipflipInXflipInYflipOutXflipOutYheadShakehingejackInTheBoxjellolightSpeedInlightSpeedOutpulserollInrollOutrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRightrubberBandshakeslideInDownslideInLeftslideInRightslideInUpslideOutDownslideOutLeftslideOutRightslideOutUpswingtadawobblezoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUp
// Normal bounce
$element.velocity("bounce");
// Twenty second bounce
$element.velocity("bounce", {
duration: 20000
});The old runSequence command has nothing in common with the new sequences code. In addition, there is no transition. or callout. prefix on a sequence name.
The previous fadeIn / fadeOut and slideUp / slideDown animations were removed as they had extra support code and were not plain animations - they can be approximated by using a begin and complete callback checking and changing the display from inline to inline-block and then back if it has been changed.