<commit_before># Ractive.js velocity transition plugin

*Find more Ractive.js plugins at [ractivejs.org/plugins](http://ractivejs.org/plugins)*

[See the demo here.](http://cfenzo.github.io/ractive-transitions-velocity)

## Usage

Include this file on your page below Ractive, jQuery, velocity and (optional) velocity.ui e.g:

```html
<script src='lib/ractive.js'></script>
<script src='lib/jquery.js'></script>
<script src='lib/jquery.velocity.js'></script>
<script src='lib/velocity.ui.js'></script>
<script src='lib/ractive-transitions-velocity.js'></script>
```

Or, if you're using a module loader, require this module:

```js
// requiring the plugin will 'activate' it - no need to use the return value
require( 'ractive-transitions-velocity' );
```

**plugin-specific instructions to go here...**



## License

Copyright (c) 2014 <NAME>. Licensed MIT

Created with the [Ractive.js plugin template](https://github.com/ractivejs/plugin-template) for Grunt.<commit_msg>Updated the README with examples and attribution<commit_after># Ractive.js velocity transition plugin

This plugin let you use [Velocity.js](http://velocityjs.org") to make [Ractive.js](http://ractivejs.org) transitions, with full support for all of Velocity.js' [properties](http://julian.com/research/velocity/#properties) and [options](http://julian.com/research/velocity/#easing) (except complete, which is used by the plugin itself)
And if you add the <a href="http://julian.com/research/velocity/#uiPack">Velocity.js UI Pack</a> aling with Velocity.js (optional, but recommended), all the packaged effects will be readily available as transitions too.

[See the demo here.](http://cfenzo.github.io/ractive-transitions-velocity)

*Find more Ractive.js plugins at [ractivejs.org/plugins](http://ractivejs.org/plugins)*

## Usage

Include this file on your page below [Ractive](http://ractivejs.org), [jQuery](http://jquery.com), [velocity](http://velocityjs.org) and (optional) [velocity.ui](http://julian.com/research/velocity/#uiPack) e.g:

```html
<script src='lib/ractive.js'></script>
<script src='lib/jquery.js'></script>
<script src='lib/jquery.velocity.js'></script>
<script src='lib/velocity.ui.js'></script>
<script src='lib/ractive-transitions-velocity.js'></script>
```

Or, if you're using a module loader, require this module:

```js
// requiring the plugin will 'activate' it - no need to use the return value
require( 'ractive-transitions-velocity' );
```

You can then roll your own transitions using a [properties](http://julian.com/research/velocity/#properties) object and (optional) [options](http://julian.com/research/velocity/#easing) object or duration in ms 
```html
<p intro="velocity:{opacity:[ 1, 0 ]},1000">intro="velocity:{opacity:[ 1, 0 ]},1000"</p>
<p intro="velocity:{translateX: [ 0, [3], 500 ],opacity:[ 1, [8], 0 ]},{duration:1000}">intro="velocity:{translateX: [ 0, [3], 500 ],opacity:[ 1, [8], 0 ]},{duration:1000,loop:2}"</p>
````

If you add the [UI Pack](http://julian.com/research/velocity/#uiPack), you can use the names effects instead of properties
```html
<p intro="velocity:'transition.flipBounceXIn',{duration:3000}">intro="velocity:'transition.flipBounceXIn',{duration:3000}"</p>
<p intro="velocity:'transition.fadeIn',4000">intro="velocity:'transition.fadeIn',4000"</p>
```

***Bonus*** IF the UI Pack is added, all effects will be available as Ractive transitions directly
```html
<p intro="transition.whirlIn">intro="transition.whirlIn"</p>
<p intro="transition.bounceLeftIn:3000">intro="transition.bounceLeftIn:3000"</p>
```

***NOTE!*** The `complete` option is not available, as it is overwritten by the transition internals

## Credits

@julianshapiro for creating [Velocity.js](http://velocityjs.org)
@Rich-Harris for creating [Ractive.js](http://ractivejs.org)


## License

Copyright (c) 2014 <NAME>. Licensed MIT

Created with the [Ractive.js plugin template](https://github.com/ractivejs/plugin-template) for Grunt.
{'fraction_non_alphanumeric': 0.16687737041719342, 'fraction_numerical': 0.017446270543615677, 'mean_word_length': 5.762393162393162, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2689164', 'n_tokens_mistral': 1353, 'n_tokens_neox': 1197, 'n_words': 340}