• Stars
    star
    167
  • Rank 226,584 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 10 years ago
  • Updated over 9 years ago

Reviews

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

Repository Details

Reactive animation package for Meteorjs

meteor-momentum

Reactive animation package for Meteor.

Momentum allows you to easily and simply re-use animation behaviour in your app via plugins that can be shared easily.

Caveat

We published this package as an exploration of an idea rather than something we rigorously maintain for public consumption. As such, the plugins that we ship probably won't work for many use cases in the wild. You're encouraged to create your own custom plugins specific to the needs of your application. Momentum is designed as a thin interface to uihooks that can be declaratively used in your templates.

Install

meteor add percolate:momentum

Usage

Wrap an element which is being added or removed (or moved) from the DOM in

{{#momentum plugin='X'}}
  {{! your content }}
{{/momentum}}

For example

{{#momentum plugin='right-to-left'}}
  {{#if show}}
    <p>My text!</p>
  {{/if}}
{{/momentum}}

When the show helper changes the element will appear as normal, but mediated by the right-to-left plugin (see the examples folder for some example plugins).

See also: momentum-iron-router

Examples

See the example directory in the project, also hosted at momentum-example.meteor.com

Built-in Plugins

css

Makes it easy to drive css transitions. By default adds the .in, .out and .off-screen classes to conrol the transition. Use the extra option to set another class during the transition. Add a timeout as a fallback if the transtionEnd event doesn't fire.

growl

A simple, but useful plugin to do a "growl" style system notification animation.

right-to-left, left-to-right

Good for mobile-style page-page transition animations.

fade

Fades in/out.

slide-height

Animate height in from zero to full, out from full to zero. Works with auto-height elements.

Your own plugin

Writing a plugin is simple. See the existing plugins for examples. You just need to provide an insertElement and removeElement (and optionally moveElement) hook. These have the same API as Meteor's _uihooks.

Contributions

It would make sense to build packages that provide extra plugins. If there's something you need in the core package to make your package work, please, open an issue or make a pull request.

License

MIT. (c) Percolate Studio, maintained by Zoltan Olah (@zol).

More Repositories

1

meteor-synced-cron

A simple cron system for Meteor. It supports syncronizing jobs between multiple processes.
JavaScript
501
star
2

percolatestudio.com

JavaScript
249
star
3

meteor-migrations

Simple migration system for Meteor
JavaScript
245
star
4

publish-counts

Meteor package to help you publish the count of a cursor, in real time
JavaScript
200
star
5

ground-control

A next generation blog, built in Meteor.
CSS
183
star
6

meteor-famous-demos

Demos from our devshop talk on Meteor+Famous
JavaScript
92
star
7

react-leaderboard

Meteor's leaderboard example app, rewritten in React.
JavaScript
74
star
8

atmosphere

Atmosphere - Meteor Packages
59
star
9

meteor-server-info

Query your Meteor app for diagnostics
JavaScript
59
star
10

meteor-google-api

A simple API encapsulating some common patterns regarding Google's APIs
JavaScript
48
star
11

meteor-segment.io

Basic Segment.io loader snippet Meteor package
JavaScript
29
star
12

famous-blog-examples

The code for the examples on our blog post http://blog.percolatestudio.com/engineering/the-future-of-javascript-animation-with-famous/
JavaScript
29
star
13

momentum-iron-router

JavaScript
27
star
14

league

CSS
26
star
15

development-guide

A set of (best?) practices that we follow at Percolate Studio.
Shell
23
star
16

mdg-localmarket

Recipes example app
17
star
17

cordova-plugin-safe-reload

Cordova plugin to watch and recover after a broken Meteor Hot Code Push.
JavaScript
14
star
18

amble

A proof of concept Apple Watch and Meteor application.
JavaScript
14
star
19

meteor-url-shortener

URL Shortener for a Meteor app.
JavaScript
13
star
20

meteor-wireframing

Wireframing tools for Meteor
JavaScript
13
star
21

safe-reload

Percolate Studio's Safe Reload Package for Meteor / Cordova
JavaScript
11
star
22

percolate-icons

Percolate Studio Icon Set Package
Less
8
star
23

meteor-detective

Snoop into your Meteor app
JavaScript
8
star
24

meteor-velocityjs

Meteor wrapper package for velocity.js
JavaScript
7
star
25

meteor-pack

Random odds and ends we use across our Meteor projects.
JavaScript
7
star
26

cordova-plugin-file-upload

Cordova plugin for non-multipart file uploads.
JavaScript
6
star
27

meteor-mixpanel

Light Mixpanel Loader package for Meteor.
JavaScript
5
star
28

mdg-todos

CSS
3
star
29

safe

Make method calls safely
JavaScript
3
star
30

collection-models

Simple model code for Meteor
JavaScript
3
star
31

meteor-factory-client

JavaScript
2
star
32

contact-form

JavaScript
2
star
33

tooltips

Tooltips for Meteor
JavaScript
2
star
34

collection-models-schemas

JavaScript
2
star
35

amble-victoria

Ruby
1
star
36

mdg-dashboard

JavaScript
1
star
37

cordova-plugin-file-transfer

Non Multipart version of the Cordova FileTransfer plugin
JavaScript
1
star
38

MeteorShower

JavaScript
1
star
39

mdg-leaderboard

Leaderboard example app redesign
1
star
40

mdg-recipes-landing

Landing page for recipes app
CSS
1
star
41

bound-form

A Meteor package for forms bound to their output via a reactive dictionary.
JavaScript
1
star
42

theme-percolate-blog

Percolate Studio blog WP theme
CSS
1
star