riot/animore

Name: animore

Owner: Riot

Description: Riot tags animations hooks

Created: 2017-05-26 17:11:50.0

Updated: 2018-05-20 08:27:04.0

Pushed: 2017-09-09 19:09:24.0

Homepage:

Size: 47

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

riot-animore

Riot tags animations hooks via anime. - beta release

Installation

Via npm

m i riot-animore -S

Script import

Via <script>

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

Via ES2015 modules

rt riot from 'riot'
rt 'riot-animore'

Via commonjs

t riot = require('riot')
ire('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 params.

Mount

For example:

tag>
 data-is="animore" mount={{ duration: 1000, translateX: [500, 0] }}>
Hello there
p>
-tag>

demo

The <p> 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:

tag>
 if={ isVisible } data-is="animore" mount={{ duration: 1000, translateX: [500, 0] }}>
Hello there
p>

utton onclick={ toggle }>toggle</button>

cript>
this.isVisible = true
toggle() {
  this.isVisible = !this.isVisible
}
script>
-tag>

demo

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:

tag>
 if={ isVisible }
data-is="animore"
unmount={{ duration: 1000, translateX: 300 }}>
Hello there
p>

utton onclick={ toggle }>toggle</button>

cript>
this.isVisible = true
toggle() {
  this.isVisible = !this.isVisible
}
script>
-tag>

demo

The above example will translate the <p> 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. 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:

tag>
rticle>
<p if={ moreText }>{moreText}</p>
article>
rticle data-is="animore" update={{ duration: 500, easing: 'linear' }}>
<p>Hello there</p>
article>

utton onclick={ addMoreText }>more text</button>

cript>
addMoreText() {
  this.moreText = 'I am more text'
}
script>
-tag>

demo

In this case animore will update the <article> 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:

tag>
l>
<li
  each={ item, i in items }
  data-is="animore"
  update={{
    duration: 300,
    easing: 'linear'
  }}
  mount={{
    duration: 200,
    translateX: 100,
    offset: i * 100
  }}>
Hello there
</li>
ul>
-tag>

demo

Callbacks

You can use all the animation callbacks provided by anime

tag>
 data-is="animore" mount={{
duration: 1000,
translateX: [500, 0],
complete: done
>
Hello there
p>

cript>
done() {
  console.log('i was mounted')
}
script>
-tag>

demo