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()
Related
I've created a simple GSAP timeline animation to slide a fullscreen div over the entire viewport.
Because the page that it's going to be sliding in over has scrollable content on it, I've set the visibility to hidden, and pushed it off of the page. When I click the selected nav link, the class of "active" is added and the animation fires.
For some reason, when I reverse it, it removes the class immediately, even if I add something like this:
$(closeAbout).on('click', "#close", function () {
timeline.reversed() ? timeline.play() : timeline.reverse();
$("#teambio").removeClass('active');
});
I've included all of the timeline code below, in case that's helpful to anyone:
var closeAbout = $('#close');
var openAbout = $('#about');
var main = $('main');
var timeline = new TimelineMax({
paused: true,
reversed: true
});
timeline
.to( "main", 0.3, {
opacity: 0,
}, 0)
.to(".about", 1, {
y: "0%",
ease: Power4.easeInOut
})
.to(".blurb", 1, {
y: "0%",
opacity: 1,
ease: Power4.easeInOut,
delay: 0.5
}, 0)
.to("#close", 0.5, {
opacity: 1,
ease: Power4.easeInOut,
delay: 0.8,
}, 0);
$(openAbout).on('click', "#about", function () {
$("#teambio").addClass('active');
timeline.reversed() ? timeline.play() : timeline.reverse();
});
$(closeAbout).on('click', "#close", function () {
timeline.reversed() ? timeline.play() : timeline.reverse();
$("#teambio").removeClass('active');
});
All I want is for the class to be removed AFTER the timeline finishes, and for some reason nothing that I've tried is working.
Also, I know that I could probably structure and name all of this better than it appears here, but I'm both new to GSAP and also just trying to get this to work.
Any help and patience would be greatly appreciated.
With something like this:
timeline.reversed() ? timeline.play() : timeline.reverse();
$("#teambio").removeClass('active');
The .play() or .reverse() function will run and start animating. Once that function returns, the next line will run, removing the class. You wouldn't want the next line to wait for the animation to complete because then all of your JavaScript would be waiting for the animation to complete!
What you should do instead is make use of GSAP's onComplete callback:
var timeline = new TimelineMax({
paused: true,
reversed: true,
onComplete: function() {
$("#teambio").removeClass('active');
}
});
GSAP will fire that function every time the tween completes.
By the way, we recommend that you upgrade to GSAP 3 doing so is easy! The new formatting is quite nice once you're used to it.
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
I'm currently trying to develop a list of projects, which on mouseenter/leave triggers a function. Currently on mouse enter the background block slides out of view to the right and on mouse leave the background block slides back into view. This works as expected, but when I enter and leave multiple times, the animations trigger and jerk around - loosing the smooth scroll effect that I'm trying to achieve. How would I go around preventing the jerkiness, I've tried adding a 'disable' class, but this doesn't seem to work. Any and all advice would be helpful.
jQuery V1:
project.mouseenter(function() {
var project = $(this).hasClass('disable');
if(!project){
var colourDuration = 750, colourDelay = 550;
$(this).find('.colour-block').stop(true,false).velocity({left:'100%'},{duration: colourDuration, delay: colourDelay, complete: function() {
$(this).addClass('disable');
}});
$(this).find('p').stop(true,false).velocity({height:'26px'},{duration: 500, delay: 225});
$(this).find('button').stop(true,false).velocity({height:'26px'},{duration: 500, delay: 225});
}
});
project.mouseleave(function() {
var project = $(this).hasClass('disable');
if(!project){
var colourDuration = 750, colourDelay = 550;
$(this).find('.colour-block').stop(true,false).velocity({left:0},{duration: colourDuration, delay: colourDelay, complete: function() {
$(this).removeClass('disable');
}});
$(this).find('p').stop(true,false).velocity({height:0},{duration: 500, delay: 225});
$(this).find('button').stop(true,false).velocity({height:0},{duration: 500, delay: 225});
}
});
jQuery V2:
project.hover(function() {
var colourDuration = 750, colourDelay = 550;
$(this).find('.colour-block').velocity({left:'100%'},{duration: colourDuration, delay: colourDelay});
$(this).find('p').velocity({height:'26px'},{duration: 500, delay: 225});
$(this).find('button').velocity({height:'26px'},{duration: 500, delay: 225});
}, function() {
$(this).find('.colour-block').velocity('stop').velocity('reverse');
$(this).find('p').velocity('stop').velocity('reverse');
$(this).find('button').velocity('stop').velocity('reverse');
});
Velocity JS
http://velocityjs.org/
Screenshot:
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)
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));