├── .gitignore
├── LICENSE.txt
├── README.md
├── example
├── .meteor
│ ├── .finished-upgraders
│ ├── .gitignore
│ ├── .id
│ ├── identifier
│ ├── packages
│ ├── platforms
│ ├── release
│ └── versions
├── example.css
├── example.html
├── example.js
└── packages
│ └── percolate:momentum
├── momentum.html
├── momentum.js
├── package.js
├── plugins
├── css.js
├── fade.js
├── growl.js
├── none.js
├── side-to-side.js
├── slide-height.js
└── velocity.js
└── versions.json
/.gitignore:
--------------------------------------------------------------------------------
1 | .build*
2 |
--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Percolate Studio Pty. Ltd.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | meteor-momentum
2 | ===============
3 |
4 | Reactive animation package for Meteor.
5 |
6 | Momentum allows you to easily and simply re-use animation behaviour in your app via plugins that can be shared easily.
7 |
8 | # Caveat
9 |
10 | 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.
11 |
12 | # Install
13 |
14 | ```
15 | meteor add percolate:momentum
16 | ```
17 |
18 | # Usage
19 |
20 | Wrap an element which is being added or removed (or moved) from the DOM in
21 |
22 | ```
23 | {{#momentum plugin='X'}}
24 | {{! your content }}
25 | {{/momentum}}
26 | ```
27 |
28 | For example
29 |
30 | ```
31 | {{#momentum plugin='right-to-left'}}
32 | {{#if show}}
33 |
My text!
34 | {{/if}}
35 | {{/momentum}}
36 | ```
37 |
38 | 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).
39 |
40 | See also: [momentum-iron-router](https://atmospherejs.com/percolate/momentum-iron-router)
41 |
42 | # Examples
43 |
44 | See the example directory in the project, also hosted at [momentum-example.meteor.com](http://momentum-example.meteor.com)
45 |
46 | # Built-in Plugins
47 |
48 | ## `css`
49 |
50 | 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.
51 |
52 | ## `growl`
53 |
54 | A simple, but useful plugin to do a "growl" style system notification animation.
55 |
56 | ## `right-to-left`, `left-to-right`
57 |
58 | Good for mobile-style page-page transition animations.
59 |
60 | ## `fade`
61 |
62 | Fades in/out.
63 |
64 | ## `slide-height`
65 |
66 | Animate height in from zero to full, out from full to zero. Works with auto-height elements.
67 |
68 | # Your own plugin
69 |
70 | 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`](https://github.com/meteor/meteor/blob/master/History.md#blaze-2).
71 |
72 | # Contributions
73 |
74 | 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.
75 |
76 | ## License
77 |
78 | MIT. (c) Percolate Studio, maintained by Zoltan Olah (@zol).
79 |
--------------------------------------------------------------------------------
/example/.meteor/.finished-upgraders:
--------------------------------------------------------------------------------
1 | # This file contains information which helps Meteor properly upgrade your
2 | # app when you run 'meteor update'. You should check it into version control
3 | # with your project.
4 |
5 | notices-for-0.9.0
6 | notices-for-0.9.1
7 | 0.9.4-platform-file
8 |
--------------------------------------------------------------------------------
/example/.meteor/.gitignore:
--------------------------------------------------------------------------------
1 | local
2 |
--------------------------------------------------------------------------------
/example/.meteor/.id:
--------------------------------------------------------------------------------
1 | # This file contains a token that is unique to your project.
2 | # Check it into your repository along with the rest of this directory.
3 | # It can be used for purposes such as:
4 | # - ensuring you don't accidentally deploy one app on top of another
5 | # - providing package authors with aggregated statistics
6 |
7 | ms27ed1jl2nsp1hchaa1
8 |
--------------------------------------------------------------------------------
/example/.meteor/identifier:
--------------------------------------------------------------------------------
1 | 195s59qqwyhb117fklju
--------------------------------------------------------------------------------
/example/.meteor/packages:
--------------------------------------------------------------------------------
1 | # Meteor packages used by this project, one per line.
2 | #
3 | # 'meteor add' and 'meteor remove' will edit this file for you,
4 | # but you can also edit it by hand.
5 |
6 | standard-app-packages
7 | autopublish
8 | insecure
9 | percolate:momentum
10 |
--------------------------------------------------------------------------------
/example/.meteor/platforms:
--------------------------------------------------------------------------------
1 | server
2 | browser
3 |
--------------------------------------------------------------------------------
/example/.meteor/release:
--------------------------------------------------------------------------------
1 | METEOR@1.0
2 |
--------------------------------------------------------------------------------
/example/.meteor/versions:
--------------------------------------------------------------------------------
1 | application-configuration@1.0.3
2 | autopublish@1.0.1
3 | autoupdate@1.1.3
4 | base64@1.0.1
5 | binary-heap@1.0.1
6 | blaze-tools@1.0.1
7 | blaze@2.0.3
8 | boilerplate-generator@1.0.1
9 | callback-hook@1.0.1
10 | check@1.0.2
11 | ctl-helper@1.0.4
12 | ctl@1.0.2
13 | ddp@1.0.11
14 | deps@1.0.5
15 | ejson@1.0.4
16 | fastclick@1.0.1
17 | follower-livedata@1.0.2
18 | geojson-utils@1.0.1
19 | html-tools@1.0.2
20 | htmljs@1.0.2
21 | http@1.0.8
22 | id-map@1.0.1
23 | insecure@1.0.1
24 | jquery@1.0.1
25 | json@1.0.1
26 | launch-screen@1.0.0
27 | livedata@1.0.11
28 | logging@1.0.5
29 | meteor-platform@1.2.0
30 | meteor@1.1.3
31 | minifiers@1.1.2
32 | minimongo@1.0.5
33 | mobile-status-bar@1.0.1
34 | mongo@1.0.8
35 | observe-sequence@1.0.3
36 | ordered-dict@1.0.1
37 | percolate:momentum@0.7.2
38 | random@1.0.1
39 | reactive-dict@1.0.4
40 | reactive-var@1.0.3
41 | reload@1.1.1
42 | retry@1.0.1
43 | routepolicy@1.0.2
44 | session@1.0.4
45 | spacebars-compiler@1.0.3
46 | spacebars@1.0.3
47 | standard-app-packages@1.0.3
48 | templating@1.0.9
49 | tracker@1.0.3
50 | ui@1.0.4
51 | underscore@1.0.1
52 | url@1.0.2
53 | velocityjs:velocityjs@1.2.1
54 | webapp-hashing@1.0.1
55 | webapp@1.1.4
56 |
--------------------------------------------------------------------------------
/example/example.css:
--------------------------------------------------------------------------------
1 | .container {
2 | background: #eee;
3 | width: 200px;
4 | height: 200px;
5 | margin-bottom: 10px;
6 | }
7 |
8 | .content {
9 | background: #ddd;
10 | width: 100px;
11 | }
12 |
13 | .if-container .content {
14 | height: 100px;
15 | }
16 |
17 | .each-container .content {
18 | height: 20px;
19 | }
20 |
21 | .notifications .content {
22 | height: 20px;
23 | width: 200px;
24 | margin-bottom: 4px;
25 | }
26 |
27 | .plugin {
28 | float: left;
29 | margin-left: 10px;
30 | }
31 |
32 | .plugin.css .content {
33 | transition: opacity 500ms ease-in;
34 | opacity: 1;
35 | }
36 |
37 | .plugin.css .content.off-screen {
38 | opacity: 0;
39 | }
40 |
41 |
--------------------------------------------------------------------------------
/example/example.html:
--------------------------------------------------------------------------------
1 |
2 | example
3 |
4 |
5 |
6 |