https://github.com/riot/animore

Riot tags animations hooks
https://github.com/riot/animore

animations demo riot

Last synced: about 2 months ago
JSON representation

Riot tags animations hooks

• Host: GitHub
• URL: https://github.com/riot/animore
• Owner: riot
• Created: 2017-05-26T17:11:50.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-22T23:33:34.000Z (9 months ago)
• Last Synced: 2024-04-15T00:12:37.149Z (9 months ago)
• Topics: animations, demo, riot
• Language: JavaScript
• Homepage:
• Size: 171 KB
• Stars: 43
• Watchers: 9
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# riot-animore

Riot tags animations hooks via [anime](https://github.com/juliangarnier/anime).

This script supports all the browsers supported by [Riot.js](https://github.com/riot/riot).

[![Build Status][travis-image]][travis-url]

[![NPM version][npm-version-image]][npm-url]

[![NPM downloads][npm-downloads-image]][npm-url]

[![MIT License][license-image]][license-url]

# Installation

Via npm

```shell

$ npm i riot-animore -S

```

## Script import

Via ``

```html

<script src="path/to/riot.js">

```

Via ES2015 modules

```js

import riot from 'riot'

import 'riot-animore'

```

Via commonjs

```js

const riot = require('riot')

require('riot-animore')

```

# Usage

Riot animore is simply a riot tag that will enable DOM animations on the following events `mount`, `unmount` and `update`.

Any `animore` tag can have instructions to handle the animations on any of the desired riot events listed above.

The animation options must be valid [anime](https://github.com/juliangarnier/anime) params.

## Mount

For example:

```html

  


    Hello there

  


```

[demo](http://plnkr.co/edit/ueWBXRKI5GiXOeWa2dHI?p=preview)

The `
` tag will be animated from a position of `transform: translateX(500px)` to `transform: translateX(0)` in `1000` milliseconds during the `mount` event. This animation will happend only once when mounted.

The animore tags can trigger the `mount` animation when used together with a riot `if` condition. For example:

```html

  


    Hello there

  


  toggle

  

    this.isVisible = true

    toggle() {

      this.isVisible = !this.isVisible

    }

  

```

[demo](http://plnkr.co/edit/8gcoxVfB4M1Ri4VkXYOP?p=preview)

The `mount` animation will be triggered whenever the `if` condition will change from `false` to `true`.

## Unmount

As for the `mount` the `unmount` animations will be triggered when an `animore` node will be unmounted. For example:

```html

  


    Hello there

  


  toggle

  

    this.isVisible = true

    toggle() {

      this.isVisible = !this.isVisible

    }

  

```

[demo](http://plnkr.co/edit/IS7S2pghzNnAIlxKDGN6?p=preview)

The above example will translate the `
` tag of `300px` in `1000` milliseconds before removing it from the DOM.

## Update

Animore makes the update transitions a lot easier thanks to the [`flip` approach](https://aerotwist.com/blog/flip-your-animations/). Animore will check the state of your tags before and after an update event trying to create a smooth animation between the two. For example:

```html

  

    
{moreText}

  

  

    
Hello there

  


  more text

  

    addMoreText() {

      this.moreText = 'I am more text'

    }

  

```

[demo](http://plnkr.co/edit/DQaQ5RdWIN8xosVhdBdc?p=preview)

In this case `animore` will update the `` tag creating a smooth transition when more text will be added to it.

# List Items

`Animore` works also in riot `each` directives as long as you will not use the `no-reorder` attibute.

For example:

```html

  


    


    Hello there

    

  


```

[demo](http://plnkr.co/edit/Wab3jbampHc7OKyLdQeR?p=preview)

# Callbacks

You can use all the animation [callbacks provided by anime](http://anime-js.com/documentation/#allCallbacks)

```html

  


    Hello there

  


  

    done() {

      console.log('i was mounted')

    }

  

```

[demo](http://plnkr.co/edit/FrHHmq34vzpB1LpUwLg3?p=preview)

[travis-image]:https://img.shields.io/travis/riot/animore.svg?style=flat-square

[travis-url]:https://travis-ci.org/riot/animore

[license-image]:http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square

[license-url]:LICENSE.txt

[npm-version-image]:http://img.shields.io/npm/v/riot-animore.svg?style=flat-square

[npm-downloads-image]:http://img.shields.io/npm/dm/riot-animore.svg?style=flat-square

[npm-url]:https://npmjs.org/package/riot-animore