Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wilsonpage/fastdom-sequencer
https://github.com/wilsonpage/fastdom-sequencer
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/wilsonpage/fastdom-sequencer
- Owner: wilsonpage
- Created: 2016-01-19T19:11:06.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2019-12-17T20:38:47.000Z (almost 5 years ago)
- Last Synced: 2024-08-09T22:52:18.924Z (3 months ago)
- Language: JavaScript
- Size: 36.1 KB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> ⚠️ This project is incomplete
---
# fastdom-sequencer
A [`fastdom`](http://github.com/wilsonpage/fastdom) extension that prioritises tasks and executes them in 'sequence' for the best possible render performance.
- User interactions are 'protected' from tasks that cause jank
- Animations/transitions are 'protected' from DOM measurements and mutations that cause jank
- Clean `Promise` based API
## Usage
```js
var sequencer = require('fastdom-sequencer')
```
or
```html
```
## API
### sequencer#on()
Binds a high-priority interaction that defers any `.animate()` or `.mutate()` task that are executed elsewhere in the app. This protects any interaction related UI changes from jank.
```js
sequencer.on(element, 'scroll', function(e) {
sequencer.mutate(...);
});
```
```js
sequencer.on(element, 'click', function(e) {
return sequencer.animate(function() {
element.classList.add('grow');
return element;
});
});
```
```js
sequencer.on(element, 'click', function(e) {
return sequencer
.animate(() => {
element.classList.add('grow');
return element;
})
.animate(() => {
element.classList.add('shrink');
return element;
})
});
```
```js
sequencer.off(element, 'click', callback);
```
- `.animate()` or `.mutate()` tasks inside the `.interaction()` callbacks are run instantly and not deferred.
### sequencer#animate()
Should contain any animation/transition code and return the target element.
```js
sequencer
.animate(() => {
element.style.transform = 'translateY(100%)');
return element;
})
.then(() => {
// transition/animation end
});
```
- Is deferred by any incomplete `.on()` interactions
- Run instantly if no `.on()` interactions are happening
- Internally run inside `sequencer.mutate()` as DOM changes will be required to trigger animation
### sequencer#mutate()
Should contain any code that is likely to cause document reflow/layout.
```js
sequencer.mutate(() => {
var li = document.createElement('li');
list.appendChild(li);
});
```
- Is deferred by any incomplete `.interactions()`
- Run instantly if no `.interactions()` are happening
- Internally run inside `sequencer.mutate()` as DOM changes will be required to trigger animation
### Chaining
Tasks can be chained together so that they happen sequentially.
```js
sequencer
.measure(() => list.clientHeight)
.mutate(height => list.appendChild(item))
.animate(() => {
item.classList.add('reveal');
return item;
})
.then(() => {
console.log('all done!');
});
```