Skip to content
This repository has been archived by the owner. It is now read-only.
A jQuery plugin to create easing functions from cubic bezier coordinates
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.gitignore
.jscsrc
.jshintrc
.travis.yml
LICENSE
README.md
gulpfile.js
package.json

README.md

jQuery cubicBezier

Build Status devDependency Status

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.

Usage

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 the coordinates to 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>

Credits

  • 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

License

The jquery-cubicBezier plugin is licensed under the MIT License.

You can’t perform that action at this time.