Develop Reference

How to make multiple animejs animations play using onclick

I have a button which I want to have play two animations at the same time(if possible, 1 second between them) when I click on it. The animations are made using animeJS.
Button code <button type="button" id="button2">Press to start</button>
Animate Script
var animate1 = anime({
targets: '#button2',
//top: '70%',
translateY: 500,
autoplay: false,
easing: 'spring(1, 80, 10, 0)'
});
var animate2 = anime({
targets: '#content',
//top: '70%',
translateY: 500,
autoplay: false,
easing: 'spring(1, 80, 10, 0)'
});
function animateAll() {
animate1.restart;
animate2.restart;
}
document.querySelector('#button2').onclick = animateAll();

function animateAll() {
animate1.restart();
animate2.restart();
}
use animate.restart() instead of animate.restart when animateAll is executed.
Only use parenthesis to execute the function ,use only name of
function when you want to assign it to a click handler.
You need to remove parentheis from animateAll when use are assigning it to the onclick handler.
document.querySelector('#button2').onclick = animateAll;
New code should be :-
function animateAll() {
animate1.restart();
animate2.restart();
}
document.querySelector('#button2').onclick = animateAll;
you can also use animate1.play(),animate2.play() instead of animate1.restart(),animate1.play()

anime js onclick animate a selector

I have this effect of anime js
$(function(){
var bouncingBall = anime({
targets: '.box',
translateY: '50vh',
duration: 300,
loop: 4,
direction: 'alternate',
easing: 'easeInCubic'
});
});
How can I run the animation only when I'm clicking on a button, so let's say I have in my HTML:
<div class="box">Button</div>

OK, I got it, In the javascript I should have had this line
document.querySelector('.box').onclick = bouncingBall.play;
so when I click on the class box it will animate the bouncingBall

Your js code should look like this:
$(function(){
var bouncingBall = anime({
targets: '.box',
translateY: '50vh',
duration: 300,
loop: 4,
direction: 'alternate',
easing: 'easeInCubic',
autoplay: false //if you don't want play animation on page load
});
document.querySelector('.box').onclick = bouncingBall //onclick event
});
Documentation: http://animejs.com/documentation/#playPause

How to make that animation passed linearly? without slowing down at the start and the finish?

I need to get a picture crawling smoothly without slowing down at the start and finish.
setInterval(function runIt() {
$(".bffffg").animate({
backgroundPositionX: 300
}, 8000);
$(".bffffg").animate({
backgroundPositionX: 0
}, 0);
}, 1);
.bffffg {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url(http://www.dejurka.ru/wp-content/uploads/2015/06/watercolor-patterns4.jpg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="bffffg"></div>
How to apply a linear effect to the animation?
And even apply different effects to it?

If you are looking for setting easing parameter, you may pass it as a separate argument like here:
$('your-selector').animate({
'your-property': 'value'
}, 8000, 'linear');
...or with options object like here:
$('your-selector').animate({
'your-property': 'value'
}, {
duration: 8000,
easing: 'linear'
});
Here is DOC for jQuery .animate() :)

Executing Fabric.js animations in sequence using onComplete

What I want is this:
http://jsfiddle.net/gJz6C/3/
But I want each box to pop in in sequence instead of all at once. I know that fabricjs has the onComplete attribute for this. I'm not so great at javascript and the one example I could find, here: http://fabricjs.com/shadows/, was not so transparent to me. I thought I had a clever solution though, to have a function that draws a single box, then calls itself onComplete, and doesn't do anything if it has been called 10 times. Here's the code and a jsfiddle at the end of it:
var canvas = new fabric.Canvas('canvas1')
function drawbox(seq) {
if (seq<11) {
var rect=new fabric.Rect({
left: seq*25+25,
top: 10,
fill: 'red',
width: 0,
height: 0,
});
canvas.add(rect)
rect.animate('width',20, {
onChange:canvas.renderAll.bind(canvas),
duration: 1000,
easing: fabric.util.ease.easeOutElastic,
});
rect.animate('height',20, {
onChange:canvas.renderAll.bind(canvas),
duration: 1000,
easing: fabric.util.ease.easeOutElastic,
onComplete: drawbox(seq+1)
});
}
}
drawbox(1)
http://jsfiddle.net/bszM5/2/
As you can see from the jsfiddle though, this still draws all the boxes at once or, if you put also put an onComplete attribute in the width animation, it basically stalls the whole tab process for a second, then draws them all at once. Am I misunderstanding how onComplete is used?

The problem is that you pass in onComplete not function but its result.
rect.animate('height',20, {
onChange:canvas.renderAll.bind(canvas),
duration: 1000,
easing: fabric.util.ease.easeOutElastic,
onComplete: function() {
// Here
drawbox(seq+1);
}
});

If i guess, you want to animate box one at a time, then you should use settimeout function.
var canvas = new fabric.Canvas('canvas1')
function drawbox(seq) {
if (seq<11) {
var rect=new fabric.Rect({
left: seq*25+25,
top: 10,
fill: 'red',
width: 0,
height: 0,
});
canvas.add(rect)
setTimeout(function(){
rect.animate('width',20, {
onChange:canvas.renderAll.bind(canvas),
duration: 1000,
easing: fabric.util.ease.easeOutElastic,
});
rect.animate('height',20, {
onChange:canvas.renderAll.bind(canvas),
duration: 1000,
easing: fabric.util.ease.easeOutElastic,
onComplete: drawbox(seq+1)
});
},1000);
}
}
drawbox(1)

Set div height to default in a jQuery animation

I have created a drop-down-menu, the html for the drop-down part basically looks like this:
<div class="menu-item">
<!-- Menu title -->
<div class="drop-down">
<!-- Content -->
</div>
</div>
I want to animate this using jQuery-Code (with the easing-plugin), but the following Code does not work:
$(".menu-item").mouseenter(activate);
$(".menu-item").mouseleave(deactivate);
function deactivate()
{
var dropdown = $(this).find("div.drop-down");
dropdown.stop().animate(
{height: '0px'},
{queue: false,
duration: 600,
easing: 'easeOut'
}
);
}
function activate()
{
var dropdown = $(this).find("div.drop-down");
dropdown.stop().animate(
{height: 'auto'},
{queue: false,
duration: 600,
easing: 'easeOut'
}
);
}
The message in the error console is: "Warning: Error in parsing value for 'height'. Declaration dropped."
If I use "height: '100px'" or somthing similar in the activate-Function it works as expected. But for maintainability reasons i want the height to be calculated autmatically, so the drop-down adapts its size to its content.
How can this be achieved?
Greetings,
Jost

I would try to use slideUp() and slideDown() for this animation. Note that those functions accept easing functions.
Other option, if for some reason you need to use animate for this, you might want to do something like this in your activate function:
function activate(){
var dropdown = $(this).find("div.drop-down");
dropdown.css('height','auto')
.hide()
.stop()
.animate(
{height: 'auto'},
{queue: false,
duration: 600,
easing: 'easeOut'
});
}

One solution could be store the height value in the deactivate method and use it when activating. I do not think that jQuery supports animating a dimension property to a string value.
var menu_handler = (function(){
var orig_height = 0;
return {
deactivate : function deactivate () {
var dropdown = $(this).find("div.drop-down");
orig_height = dropdown.height();
dropdown.stop().animate(
{height: '0px'},
{queue: false,
duration: 600,
easing: 'easeOut'
}
);
},
activate : function activate () {
var dropdown = $(this).find("div.drop-down");
dropdown.stop().animate(
{height: orig_height},
{queue: false,
duration: 600,
easing: 'easeOut'
}
);
}
};
}
$(".menu-item").mouseenter(menu_handler.activate));
$(".menu-item").mouseleave(menu_handler.deactivate));