• Stars
    star
    136
  • Rank 262,550 (Top 6 %)
  • Language
    JavaScript
  • License
    Other
  • Created over 11 years ago
  • Updated over 10 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Easing functions for canvas etc

ease

Easing functions (for canvas etc)

  • linear
  • inQuad
  • outQuad
  • inOutQuad
  • inCube
  • outCube
  • inOutCube
  • inQuart
  • outQuart
  • inOutQuart
  • inQuint
  • outQuint
  • inOutQuint
  • inSine
  • outSine
  • inOutSine
  • inExpo
  • outExpo
  • inOutExpo
  • inCirc
  • outCirc
  • inOutCirc
  • inBack
  • outBack
  • inOutBack
  • inBounce
  • outBounce
  • inOutBounce
  • inElastic
  • outElastic
  • inOutElastic

Aliases

  • in-quad
  • out-quad
  • in-out-quad
  • in-cube
  • out-cube
  • in-out-cube
  • in-quart
  • out-quart
  • in-out-quart
  • in-quint
  • out-quint
  • in-out-quint
  • in-sine
  • out-sine
  • in-out-sine
  • in-expo
  • out-expo
  • in-out-expo
  • in-circ
  • out-circ
  • in-out-circ
  • in-back
  • out-back
  • in-out-back
  • in-bounce
  • out-bounce
  • in-out-bounce
  • in-elastic
  • out-elastic
  • in-out-elastic

Example

var ease = require('ease');
var requestAnimationFrame = require('raf');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var stop = false;
function animate() {
  if (stop) return;
  requestAnimationFrame(animate);
  draw();
}

var startx = 20;
var x = startx;
var destx = 300;
var y = 400 / 2;
var duration = 1000;
var start = Date.now();
var end = start + duration;

function draw() {
  var now = Date.now();
  if (now - start >= duration) stop = true;
  var p = (now - start) / duration;
  val = ease.inOutBounce(p);
  x = startx + (destx - startx) * val;
  canvas.width = canvas.width;
  ctx.fillStyle = 'red';
  ctx.arc(x, y, 10, 0, Math.PI * 2, false);
  ctx.fill();
}

animate();

Special Thanks

These easing functions were originally written by Robert Penner, and optimized by the tween.js authors.

License

The MIT License

Copyright (c) 2010-2012 Tween.js authors.

Easing equations Copyright (c) 2001 Robert Penner http://robertpenner.com/easing/

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

More Repositories

1

debounce

Debounce functions. Useful for implementing behavior that should only happen after a repeated action has completed.
JavaScript
609
star
2

emitter

Event emitter component
JavaScript
582
star
3

textarea-caret-position

xy coordinates of a textarea or input's caret
JavaScript
581
star
4

escape-html

Escape string for use in HTML
JavaScript
430
star
5

reactive

Tiny reactive template engine
JavaScript
385
star
6

dom

DOM traversal, manipulation and events aggregate library (like jQuery)
JavaScript
227
star
7

domify

html -> elements
JavaScript
201
star
8

rope

Efficient data structure for large mutable strings.
JavaScript
131
star
9

merge-descriptors

Merge objects using descriptors
JavaScript
124
star
10

model

Minimalistic extensible data models
JavaScript
122
star
11

component.github.io

components search using component-crawler
JavaScript
119
star
12

infinity

infinite scrolling with loading and unloading.
HTML
105
star
13

tip

Tooltips with a nice flexible API
JavaScript
96
star
14

scroll-to

Smooth window scrolling with requestAnimationFrame and the Tween component
JavaScript
89
star
15

throttle

Throttle function calls
JavaScript
77
star
16

calendar

Calendar UI component
JavaScript
74
star
17

todo

Todo list example application using components and Express for the backend
JavaScript
73
star
18

type

Type assertions aka less-broken `typeof`
JavaScript
69
star
19

cookie

Cookie component
JavaScript
69
star
20

to-function

Convert property access strings to a function ("user.name.first" etc)
JavaScript
64
star
21

swipe

Swipe component with touch support (for image carousels, dynamic content etc)
HTML
61
star
22

enumerable

Enumerable mixin
JavaScript
57
star
23

pinch

pinch in and out on elements on handheld devices
JavaScript
56
star
24

classes

Cross-browser element class manipulation
JavaScript
52
star
25

dialog

Dialog component
JavaScript
52
star
26

focus

Image focal point detection algorithm
JavaScript
51
star
27

path-to-regexp

DEPRECATED use https://github.com/pillarjs/path-to-regexp
JavaScript
50
star
28

url

url parsing utility
JavaScript
47
star
29

regexps

Collection of regular expressions (urlsafe, url, email, credit card, ....)
46
star
30

audio

Sleek radial audio player skin for the <audio> tag
JavaScript
46
star
31

s3

Upload files to s3 from the client
JavaScript
45
star
32

autoscale-canvas

Retina-enable an HTML Canvas element
JavaScript
45
star
33

trace

Client-side tracing for performance analysis
JavaScript
45
star
34

histogram

Create JavaScript image histograms with Canvas
JavaScript
45
star
35

upload

file upload and progress api
JavaScript
39
star
36

network

Measure network latency to make dynamic adjustments to content
JavaScript
39
star
37

xhr-image

XHR2 driven images for progress events
JavaScript
39
star
38

tween

Motion tween engine using "ease"
HTML
36
star
39

notification

growl-style notifications for the browser
JavaScript
36
star
40

events

High level dom node event management (with delegation support)
JavaScript
35
star
41

event

Event binding component
JavaScript
35
star
42

raf

requestAnimationFrame
JavaScript
34
star
43

querystring

Simple key / value pair query-string parser
JavaScript
34
star
44

clipboard-dom

Makes a DOM element (i.e. <button>) write to the system clipboard
JavaScript
34
star
45

piecon

Pie favicons -- great for upload progress etc
JavaScript
34
star
46

delegate

Event delegation component
HTML
34
star
47

in-viewport

Check if an element is in the viewport
JavaScript
33
star
48

autosuggest

Autosuggest values for text inputs
JavaScript
31
star
49

router

Simple client-side router
JavaScript
31
star
50

drop

Drag and drop file uploads a single normalized event
JavaScript
31
star
51

progress

Circular progress indicator using Canvas
JavaScript
30
star
52

css

DOM element css helper
JavaScript
30
star
53

fullscreen

Fullscreen api wrapper
JavaScript
29
star
54

github-buttons

Script version of @mdo's Github Buttons
CSS
28
star
55

per-frame

throttle per animation frame
JavaScript
28
star
56

schema

A simple, fluent API for generating immutable schemas.
JavaScript
28
star
57

selectable

Selectable DOM elements
JavaScript
26
star
58

onload

Add onload transitions to DOM elements (fade in images etc)
JavaScript
26
star
59

humanize-number

Humanize a number 1000000.99 -> 1,000,000.99
JavaScript
26
star
60

queue

function job queue with concurrency and timeout support
JavaScript
25
star
61

dropload

Drag and drop uploads
JavaScript
25
star
62

datepicker

Datepicker component built on Calendar
JavaScript
24
star
63

query

Query the DOM with selector engine fallback support
JavaScript
24
star
64

overlay

Page overlay component
JavaScript
23
star
65

menu

Menu component
JavaScript
23
star
66

file-picker

File picker component
HTML
22
star
67

clipboard

Clipboard API wrapper
JavaScript
21
star
68

bind

Function binding utility
JavaScript
21
star
69

spin

Higher level spinner api built on component/spinner - positions and scales automatically within target element
JavaScript
21
star
70

drop-anywhere

Drag and drop a file anywhere to upload
JavaScript
21
star
71

touchit

multi-touch event simulation in the browser
JavaScript
20
star
72

ie

get the running version of IE without UA sniffing.
JavaScript
20
star
73

has-cors

Detects support for Cross-Origin Resource Sharing
JavaScript
20
star
74

worker

Nicer web worker API
JavaScript
20
star
75

array-equal

check if two arrays are equal
JavaScript
20
star
76

humanize-keys

Humanize keys (command -> ⌘)
JavaScript
19
star
77

convolve

Canvas convolution filters
JavaScript
19
star
78

popover

Popover component built on top of Tip
HTML
19
star
79

channel

two-sided event emitter with support for middleware
JavaScript
19
star
80

is-near-bottom

Check if the document is scrolled near the bottom
JavaScript
19
star
81

clone

object deep clone component
JavaScript
18
star
82

tap-event

Create tap event listeners
JavaScript
17
star
83

set

Set container
JavaScript
17
star
84

color-parser

CSS color string parser
JavaScript
17
star
85

dropdown

Dropdown menu
JavaScript
16
star
86

gesture

Multi-touch gesture sugar layer on top of hammer.js
JavaScript
16
star
87

favicon

Dynamic favicon library via data uris (canvas.toDataURL() etc)
JavaScript
16
star
88

collection

Enumerable data model collections
JavaScript
16
star
89

route

Route implementation for client-side routers
JavaScript
16
star
90

inherit

https://github.com/component/inherits
JavaScript
16
star
91

t

translation utility
JavaScript
16
star
92

sparkline

Tiny sparkline canvas graphs
JavaScript
15
star
93

value

get / set form input values
JavaScript
15
star
94

noticon

Notification bubble favicons
JavaScript
15
star
95

indexof

Thanks microsoft
JavaScript
15
star
96

thumb

Scale an image or data uri within the given dimensions
JavaScript
14
star
97

flipbox

Double-sided flip box using css transformations.
JavaScript
14
star
98

removed

Invoke a callback when a DOM element is removed from the document
JavaScript
14
star
99

dev

Associate objects with DOM elements in development for easy inspection
JavaScript
14
star
100

matches-selector

Check if an element matches a given selector string
JavaScript
14
star