This plugin allows you to create jQuery easing functions from cubic bezier coordinates. The code for the easing functions is a 1:1 conversion from the WebKit Source to JavaScript.
Just include jQuery and the jquery-cubicBezier plugin in your HTML file. After that you can start using the plugin.
The plugin takes two arguments:
coordinates- Any array which should contain the four cubic bezier curve coordinates. The coordinates for a linear curve would be[0, 0, 1, 1].name- The name under which the jQuery easing function should be registered. By default the plugin converts thecoordinatesto a string and registers the easing function under this name.
<body>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.cubicBezier.min.js"></script>
<script>
$(function() {
$('#element').animate({ 'left': 100 }, 1000, $.cubicBezier([0.25, 0.1, 0.25, 1], 'ease'));
});
</script>
</body>- WebKit - For the original cubic bezier easing code
- netzgesta.de - For the 1:1 conversation of the WebKit code to JavaScript
- Janne Aukia - For the idea how to use the code for jQuery easing functions
The jquery-cubicBezier plugin is licensed under the MIT License.