Animation plugins that using power of Animejs
Include Animejs in your project and plugin script.
<!-- Animejs -->
<script src="animejs.js"></script>
<!-- All plugins -->
<script src="animejsPlugins-all.js"></script>
<!-- Each plugin can be used independent -->
<script src="animejsPlugins-RandomLetters.js"></script>
<script src="animejsPlugins-ScrollContainer.js"></script>
<script src="animejsPlugins-ImagesPlayer.js"></script>
https://codepen.io/alexzhav/pen/yLLVJqy
<!-- First wrap each char of animation in span (you can use helper animejsPlugins.charmingWordsChars(el)) -->
<div class="class">
<span class="char">W</span>
<span class="char">O</span>
<span class="char">R</span>
<span class="char">D</span>
</div>animejsPlugins.randomLetters({
targetsSelector: '.class span[class^="char"]',
symbols: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789',
stepPerFrames: 3,
animation: {
scale: {value: [0, 1], duration: () => anime.random(500, 1000), easing: 'cubicBezier(.17, -0, .83, 1)' },
opacity: {value: [0, 1], duration: 500 },
endDelay: () => anime.random(300, 600),
easing: 'cubicBezier(.17, .17, .83, .83)',
autoplay: false,
},
onBegin: (anim) => {},
onUpdate: (anim) => {},
onComplete: (anim) => {}
})Animation target selector
Symbols to choose from.
Change symbol every X frame.
Animejs properties. Begin, update and complete animejs callbacks overwritten by onBegin, onUpdate, onComplete.
{
scale: {value: [0, 1], duration: () => anime.random(500, 1000), easing: 'cubicBezier(.17, -0, .83, 1)' },
opacity: {value: [0, 1], duration: 500 },
endDelay: () => anime.random(300, 600),
easing: 'cubicBezier(.17, .17, .83, .83)',
autoplay: false,
}Callback function when animation begin. Get current anime object as argument.
Callback function when animation update. Get current anime object as argument.
Callback function when animation complete. Get current anime object as argument.
- Making video from image files.
https://codepen.io/alexzhav/pen/BaawOQp
animejsPlugins.imagesPlayer({
containerSelector: '.selector',
path: '/animations/logo-png/{num}.png',
from: 26,
to: 56,
loop: true,
autoplay: true,
direction: 'normal',
sprite: false,
onImagesLoaded: (anim) => {},
onBegin: (anim) => {},
onUpdate: (anim) => {},
onComplete: (anim) => {}
})On images loaded event. Argument - current anime object.
Same as animejs property
Boolean. If set to true path to sprite without {num} '/animations/logo-png/name.png'. Images in sprite must be in vertical direction.
- Scroll by container height.
- Not hide scrollbar.
- Scrollbar overlayed by hidden div that catch click events.
- Recommend to disable it on mobiles.
https://codepen.io/alexzhav/pen/Yzzxgqd
<!-- Section not allowed to have as parentNode body -->
<div class="sections">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>animejsPlugins.scrollContainer({
sectionSelector: '.section',
wrapperSelector: '.wrapper',
duration: 1000,
easing: 'easeInOutQuad',
onBegin: (index, anim) => {},
onComplete: (index, anim) => {},
})Section selector
Wrapper selector
Animation duration
Animation easing
Callback function when animation begin. Arguments: current section index, anime object.
Callback function when animation complete. Arguments: current section index, anime object.
- tiny helper to create slider
https://codepen.io/alexzhav/pen/Exjaaaq
animejsPlugins.slider({
slidersLength: 2,
onSlide: function(currentSlide, nextSlide, done) {
animation(currentSlide, nextSlide, done)
},
autoplay: false,
timeout: 3000
})Slides count
Autoplay mode
Timeout between slide change if autoplay is active
Callback function when change slide event start. Arguments: current slider node element, next slide node element, callback to call when animation finished.
Start next slider
Start prev slider
Start slider with index
Stop autoplay. Used on first click.
Start autoplay