• Stars
    star
    170
  • Rank 223,357 (Top 5 %)
  • Language
    JavaScript
  • License
    BSD 3-Clause "New...
  • Created almost 11 years ago
  • Updated about 10 years ago

Reviews

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

Repository Details

Metronome

A friendlier front-end to requestAnimationFrame-based animations.

Documentation

This library provides two main methods for animation via requestAnimationFrame: a frame-based method, and a duration-based method.

Frame-Based Animations

A frame-based animation specifies an explicit number of frames that the animation should take. The animation will use exactly that quantity of frames, regardless of the specific framerate that the browser is currently running.

Advantages of this method include a visually smoother animation, as essentially no frames are "skipped".

Duration-Based Animations

A duration-based animation specifies an exact amount of time (in milliseconds) that the animation should take. In this scenario, regardless of the framerate of the browser, the animation will conclude in an exact amount of time.

Advantages of this method include a chronologically more predictable process, essentially "skipping" frames in order to finish the animation in the time specified. This is important if duration-based animations are chained together, or if the quickness of the animation is more important than the smoothness of an animation (such as a lightning bolt flash, for example).

Usage

var path = fetchPreparedSVGPath();
var length = path.getTotalLength();

path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;

// frame based animation
Metronome({
  type: 'frame',
  frames: 120,
  easing: 'easeInOutQuad',
  draw: function(handle, progress) {
    path.style.strokeDashoffset = Math.floor(length * (1 - progress));
  },
  complete: function() {
    alert('Jerbs done');
  }
});

// duration based animation
Metronome({
  type: 'duration',
  duration: 3000,
  easing: 'easeInOutQuad',
  draw: function(handle, progress) {
    path.style.strokeDashoffset = Math.floor(length * (1 - progress));
  },
  complete: function() {
    alert('Jerbs done');
  }
});

Easing

This includes includes several basic easing equations. Please see the source for the complete list of easing methods.

draw() and complete()

draw() is the main draw action that is called during the animation loop. All side-effects of the animation shoudl be done in this method.

The handle parameter is simply the requestAnimationFrame handle that JavaScript provides. Using the handle, code inside draw() could optionally break out of the animation loop early.

The progress paramter is a decimal percentage of the progress of the animation, starting from 0 and continuing to 1. In a frame based animation, progress percentage increases linearly. In a duration based animation, there is no guarantee of linear progression, are momentary freezes or fps slowdowns may cause ``progress` to jump in order to catch up to where the progression should be given elapsed time and desired duration.

Options

  • type: one of frame or duration
  • draw: callback that fires with each requestAnimationFrame call
  • complete: calback that fires after the completion of the animation
  • easing: one of the easing methods. Default is 'easeInOutQuad'. See source for more easing options.

Dependent on type:

  • frames: the number of frames the animation should run in a frame type animation
  • duration: the total amount, in milliseconds, that the animation should run in a duration type animation

Authors

David Zhou ([email protected], @dz)

Contribute

This is an active project and we encourage contributions. Please review our guidelines and code of conduct before contributing.

License

Copyright (c) 2014, Vox Media, Inc. All rights reserved.

BSD license

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

  1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

  2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

  3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

More Repositories

1

meme

Meme generator
JavaScript
1,849
star
2

autotune

Platform for reusable news tools
JavaScript
414
star
3

github-action-slack-notify-build

Report GitHub Actions build status on Slack
JavaScript
252
star
4

data-projects

Scripts and data for various Vox Media stories and news projects
Jupyter Notebook
185
star
5

middleman-google_drive

Middleman extension for loading content from Google Drive
Ruby
137
star
6

verge-50

An example of a Middleman-powered editorial app built by the Vox Media Product Team and published by The Verge.
CSS
129
star
7

accessibility

Vox Product's Accessibility Guidelines
HTML
90
star
8

quiz-generator

JavaScript
88
star
9

lightbike

Asset budget auditing library - for internet site webpages
JavaScript
67
star
10

gliss

Constraint based article layout system
HTML
63
star
11

mapper

A tool for generating world and US-state choropleth maps
JavaScript
51
star
12

Transcriber

NWJS os x desktop based application that given a video/audio file returns a transcription using IBM Watson Speech to text API
HTML
41
star
13

viz-app

GUI for ai2html
HTML
38
star
14

code-of-conduct

HTML
37
star
15

vax-fig

jQuery plugin that downloads and displays the first frame of an animated GIF
JavaScript
35
star
16

tonr

Vax 16 project by Pam, Brittany, Alesha, Scott, and Aidan
JavaScript
27
star
17

sass-theme-template-loader

Themed CSS stylesheet generator for Sass assets
JavaScript
13
star
18

maestro

Maestro - the BigQuery Orchestrator
Go
13
star
19

revenue-hiring

Hiring Guide and Programming Examples
Ruby
11
star
20

pixelpunch

http://pixelpunch.voxmedia.com
HTML
9
star
21

ad-server-proxy

Ruby
8
star
22

captions_burner

NWJS os x desktop app that given a srt and a video burns the captions onto the video. Can also export as gif.
HTML
8
star
23

concert-vast

A simple VAST Library
JavaScript
7
star
24

yobot

Yo.
Ruby
6
star
25

autotune-image-slider

JavaScript
6
star
26

vox-hiring-exercise

Ruby
6
star
27

tap-instagram

Singer Tap for the Instagram Graph API
Python
5
star
28

rich-text-ruby

Format for representing rich text documents and changes, ported from https://github.com/ottypes/rich-text
Ruby
5
star
29

bongo

Bongo is a responsive tool that quickly enables people to make type pairings, color, branding and photo choices in a live, responsive environment without writing any code.
Ruby
4
star
30

autotune-wtfengine

WTFEngine for Autotune
JavaScript
4
star
31

canonical_domain

Ruby
4
star
32

data-privacy-compliance

Vox Media's library for implementing data privacy frameworks for use in revenue
JavaScript
4
star
33

eslint-config-voxproduct

Eslint config for js projects
JavaScript
3
star
34

setup-vox-rig

Script for setting up your Mac OS X system to make Vox Media middleman apps (should be public)
Shell
3
star
35

kinto_box

A ruby client for Kinto(kinto.readthedocs.io)
Ruby
3
star
36

varniphite

Go
3
star
37

voxholder

Ruby
3
star
38

thumbor_varnish_http_loader

Python
2
star
39

ida

Vax project 2016 - Rethinking Visual Narratives
JavaScript
2
star
40

DevOps-Technical-Exercise

Ruby
2
star
41

tap-elasticsearch

meltano extractor for elastic search
Python
2
star
42

tap-twitter

Meltano extractor for organic data from the Twitter API
Python
2
star
43

image_compression_experiments

JavaScript
2
star
44

vc-ikea-minisite

Ikea Minisite 2020
HTML
1
star
45

thumbor_indexed_file_result_storage

Python
1
star
46

nginxplusphite

Puts nginx plus status on graphite
Go
1
star
47

omniauth_service

Ruby
1
star
48

tap-facebook-pages

Singer tap for organic Facebook content insights built using the Meltano SDK
Python
1
star
49

tap-google-sheets

Meltano extractor for Google Sheets
Python
1
star
50

identity-library

Simple JavaScript library to generate private identifiers
TypeScript
1
star
51

iframe-client

Cross-origin iframe messaging client
JavaScript
1
star
52

tap-firestore

Singer Tap for Firestore built with the Meltano SDK
Python
1
star
53

thumbor_rewrite_loader

An HTTP loader which rewrites matches from a list, with a single canonical domain.
Python
1
star
54

attribute_delegator

An ActiveRecord extension that allows you to treat fields from another model/table as local attributes.
Ruby
1
star
55

open-source-contribution-guidelines

Guidelines and code of conduct for contributing to Vox Media open source projects.
1
star