(Be kind to Github, don't hotlink JS files)
This plugin provides a basic factory method that allows you to speed up and repeat an easing function multiple times over the course of a single animation call.
The idea for this plugin first started with needing to flash a warning message 3 times, by animating the opacity from 0 to 1 to 0 to 1 to 0 to 1. The usual method used to do this in a jQuery-based site is to setup multiple animation calls, either by setting up a series of callbacks, or by queueing them in a long chain (this is the method used by jQuery UI's Pulsate effect).
I wanted to have the same effect, but only use a single animation call.
When you create a repeat easing, a new easing function is created that is basically a wrapper around the original easing function. The new function applies some extra calculations to the result of the original function, which are used to speed up, repeat and invert the result. This results in a new easing that repeats the original easing back and forth a set number of times.
Any easing function can be repeated, including jQuery's inbuilt functions; those provided by the standard jQuery easing plugin; or any custom functions that follow the same API.
To create a repeated easing, use the utility method on the jQuery object:
$.createEasingRepeater('repeaterName', 'existingEasingName', repeatTimes);
repeaterName is a custom name that you give the new easing function.
This name is then used as the easing when creating animation calls.
existingEasingName is the easing function that you want to repeat – e.g. "easeOutBack".
repeatTimes is an integer that refers to the number of times the animation reaches its end point,
not how many animation steps there are. Therefore a value of 2 will run 3 animation steps:
once to the end point, then back to the beginning, then to the end point again.
Once the new easing function has been created, you can use it like any other easing by specifying it in an animation call like this:
$(selector).animate(properties, duration, 'repeaterName');
NOTE: Unlike the jQuery UI Pulsate effect – which specifies the time duration of each individual animation step – for this plugin duration is specified for the entire animation sequence.
For some more usage examples, see the demo and examples pages.