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)
Related
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()
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:
Which property of google chart adds the Animation in column chart from top to bottom ?
By Adding
animation: {duration: 10000, easing: 'out',}
in option is enough or we need to add something else also for that ?
yes it is enought add
animation: {
duration: 1000
}
have a look in this example that I have found
refer this page for documentation about animation property
example
function init() {
var options = {
width: 400,
height: 240,
animation:{
duration: 1000,
easing: 'out'
},
vAxis: {minValue:0, maxValue:1000}
};
You should delete the last comma ,.
Try with this:
animation: {duration: 10000, easing: 'out'}
I'm making a web based presentation using the full width and height carousel of bootstrap for a client. It is a simple tutorial of how to create an account in the client's website and it consist on images only. However, I managed to put an image of a pointer that animates with jQuery and highlight the place where the user has to click. So far the animation works perfect but I need it to start when the user gets to see that slide, so I was wondering if it's possible to start the animation when you see that pointer then it starts moving.
This is my script:
$('.carousel').carousel({
pause: true,
interval: false
})
</script>
<script>
(function animation() {
var options = {
duration: 800,
easing: 'linear'
};
$('.fill')
.find('.pointer_fing')
.animate({
left: 36,
top: 880
},
options
)
.animate({
left: 866,
top:694
},
options
)
.animate({
left: 936,
top: 350,
},
options
)
.animate({
left: 936,
top: 280,
},
$.extend(true, {}, options, {
complete: function() {
animation();
}
})
);
})();
I'm trying to apply a CSS transition to an element, but at some point before it completes, remove the transition entirely and start another one.
This question answers how to stop a transition in its tracks, but I modified the jsFiddle there to illustrate the issue:
http://jsfiddle.net/zXVLd/
var $div = $('div');
$div.click(function(){
$div.css({
left: 0,
transition: 'none'
});
$div.transit({
top: 600,
},5000);
});
function complete(){
$div.css('backgroundColor', 'blue');
}
$div.transit({left: 600}, 5000, 'linear', complete);
What I want to happen is for the box to reset its position and move down when clicked, and for the completed handler on the first transition to not fire.
What does happen is the box resets its position when clicked, but doesn't move down until the first transition completes (even though the motion from the first transition is no longer happening). The completed handler still fires on the first transition as well.
I've updated your fiddle with the clearQueue method: http://jsfiddle.net/zXVLd/1/
var $div = $('div');
$div.click(function(){
$div.clearQueue().css('left', $div.css('left')).transit({
top: 600,
},5000);
});
function complete(){
$div.css('backgroundColor', 'blue');
}
$div.transit({left: 600}, 5000, 'linear', complete);
That does the trick. See http://api.jquery.com/clearQueue/ for more information on the clearQueue method.
To do this kind of animations, you can try to use GSAP's TweenLite. It's incredible what you can achieve with it. http://www.greensock.com/jump-start-js/ If you include this on your page and add the following code:
div.bind('click', function(e) {
// note that you can animate two directions, from and to
TweenLite.from(div /*element*/, 0.2 /*easing in seconds*/, {
// the css, but for positioning elements you can also use x and y.
x: 600,
easing: linear,
onStart: function() {
Stuff you want to do before the animation
},
onComplete: function() {
Stuff you want to do after animationg
}
});
});
The plugin which you use is using queue. So, it is just enough to call $div.dequeue(); I.e.
var $div = $('div');
$div.click(function(){
$div.dequeue();
$div.css({
left: 0,
top: 0,
transition: 'none'
});
$div.transit({
top: 600,
},5000);
});
function complete(){
$div.css('backgroundColor', 'blue');
}
$div.transit({left: 600}, 5000, 'linear', complete);
fiddle -> http://jsfiddle.net/krasimir/zXVLd/2/