beloader-animations
v1.0.1
Published
Wrapper for animeJS with nice presets to insert animated blocks and animate text, backgrounds and colors
Downloads
6
Maintainers
liqueurdetoileReadme
beloader-animations
Beloader animations is a plugin for Beloader.
It loads Elementify for lightweight easy DOM mangagement and bundles the great anime.js from Julian Garnier to support animations.
It also provides some presets for displaying animated blocks, anime background colors... that may grow other time.
Installation
In browser
For usage in browser, no installation is required. Simply load plugin with Beloader.
That example will load Beloader from CDN, then load plugin and font and finally display animated block and loading message without FOUT effect.
<html>
<head>
<title>Animation Beloader plugin Example</title>
</head>
<body style="background-color:#000">
<style>
.loading {
font-family: 'Droid Sans';
font-size: 2em;
text-align: center;
color: #fff;
font-weight: bold;
margin-top: 2em;
text-transform: uppercase
}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script type="text/javascript">
var loader = new Beloader({
defer: true
});
loader.fetch('plugin', {
id: 'animations',
name: 'animations',
url: 'https://cdn.jsdelivr.net/npm/beloader-animations@latest'
}).promise.then(function() {
elementify.load();
loader.animations.load('BackgroundColor', function(BackgroundColor) {
new BackgroundColor({
targets: 'body',
from: '#000',
to: '#09c'
}).start();
});
loader.animations.load('ThreeDotsBouncing').then(function(ThreeDotsBouncing) {
var dots = new ThreeDotsBouncing();
Q('body').style('backgroundColor', '#000');
Q('body').append(dots.block);
dots.block.width = '30%';
dots.start();
})
});
loader.fetch('font', {
webfont: {
google: {
families: ['Droid Sans', 'Droid Serif']
}
}
}).promise.then(function(item) {
elementify.Q('body').prepend('<div class="loading">Loading in progress</div>');
});
</script>
</body>See a demo of this example : https://cdn.rawgit.com/beloader/beloader-animations/94619414/demos/example.html
As module
As Beloader, beloader-animations is available as UMD to be embedded in wider app. Though, main beloader-animations is pretty useless as a module, each animation can be embedded separately :
import 'ThreeDotsBouncing' from 'beloader-animations/dist/animations/ThreeDotsBouncing';
//or
const ThreeDotsBouncing = require('beloader-animations/dist/animations/ThreeDotsBouncing').default;Each animation expect Elementify and Anime to be already loaded as externals.
Preset animations
See documentation for details.