Combine the use of velocity.js' slideUp and begin: function - javascript

How do you combine these two, so that one can slide an item up, but trigger some JS just as that animation starts.
SlideUp code
.velocity("slideUp", { delay: 500, duration: 1500 });
Begin: code
$element.velocity({
opacity: 0
}, {
/* Log all the animated divs. */
begin: function(elements) { console.log(elements); }
});
Doing something like this doesn't work.
.velocity("slideUp", { delay: 500, duration: 1500 }), {
/* Log all the animated divs. */
begin: function(elements) { console.log(elements); }
});

You have to put thebegin property inside the options object:
.velocity("slideUp", {
delay: 500, duration: 150,
begin: function(elements) { console.log(elements); }
});

Related

how to remove element in anime.js?

I'm a beginner in anime.js. I animate something and after the animations is complete i want to remove the element that i'm animating.
The animation is working perfect. I just can't remove the element that im working and i dont want to hide it
logoTimeline
.add({
targets: text1,
duration: 700,
delay: function(el, index) { return index*50; },
opacity: 1,
easing: 'easeOutCirc',
translateX: function(el, index) {
return [(-50+index*10),0]
},
offset:0
})
.add({
remove:text1
})
Per the API Documentation you need to add a complete callback function which will fire once the animation has completed:
logoTimeline
.add({
targets: text1,
duration: 700,
delay: function(el, index) { return index*50; },
opacity: 1,
easing: 'easeOutCirc',
translateX: function(el, index) {
return [(-50+index*10),0]
},
offset:0,
complete: function(anim) {
logoTimeline.remove();
}
});

JavaScript Animation: Handling Complex Animations That Use Callbacks & Loop

I'm using Snap.svg to animate 13 SVGs. All the SVGs start from one point and animate through several other animations (through callbacks). An simplified example of my animation is described, in code, below:
var reset = function(person) {
person.attr({transform: 't0,0', opacity: 0});
animatePerson(person);
};
var animatePerson = function(person) {
person.animate({opacity: 1}, 300, null,function() {
person.animate({transform: 't100,20'}, 1000, null, function() {
person.animate({opacity: 0}, 300, null, function() {
reset(person);
});
});
});
};
var people = [Snap('#Person_1'), Snap('#Person_2'), Snap('#Person_3'), Snap('#Person_4'), Snap('#Person_5')];
My first attempt was to map over the array and set a timeout for the first animation like so:
people.map(function(person, index) {
setTimeout(function() {
animatePerson(person);
}, (300*index));
});
However this did not work as the SVGs would start to overlap/overtake each other when they looped. Then I tried to set the timeout equal to the length of time it took for one complete "lap" of the animation and divide that by the total amount of SVGs like so:
people.map(function(person, index) {
setTimeout(function() {
animatePerson(person);
}, (1600/people.length));
});
Is there a way in Snap.svg or JavaScript to have the animation loop using callbacks and/or timeouts, or an I way off here?
Here is an image of the full animation I am referring to:
One way I have done this, is to write a small function that takes in an element and an array of preset animations, and go through them in turn via the callback, which looks like this...
Edit: Modified slightly to be able to include a different element per animation, and example2 link below, includes the option to include a function to call each time as well.
function nextFrame ( frameArray, whichFrame ) {
if( whichFrame >= frameArray.length ) { return }
frameArray[ whichFrame ].el.animate(
frameArray[ whichFrame ].animation,
frameArray[ whichFrame ].dur,
frameArray[ whichFrame ].easing,
nextFrame.bind(null, frameArray, whichFrame + 1 )
);
}
Then you could pass it an array of anims, like this...
var myFrames = [
{ el: g, animation: { transform: 'r360,150,150' }, dur: 1000, easing: mina.bounce },
{ el: r, animation: { transform: 't100,-100s2,3' }, dur: 1000, easing: mina.bounce },
{ el: r, animation: { transform: 't100,100' }, dur: 1000, easing: mina.bounce },
{ el: g, animation: { transform: 's2,1' }, dur: 1000, easing: mina.bounce },
{ el: r, animation: { transform: 's1,2' }, dur: 1000, easing: mina.bounce },
{ el: c, animation: { transform: 's1,1' }, dur: 1000, easing: mina.bounce }];
Then you can call it with
nextFrame( el, myFrames, 0 );
example (click run on there)
example 2 (this allows you to include a func to call as well as part of it)

side slide menu not creating push effect in ipad and phone

I am using the following side slide menu for my project :-
http://www.mywork.com.au/blog/demos/facebook-sidebar-menu/
I've changed the left slide-in to right slide-in. It works very well for me on the desktop but in ipad and phone the page wrapper has a lagging-behind/scrolling effect. It seems like that the page wrapper scrolls from right to the left under the side menu container after the menu has appeared.
I've tried using "fast", "slow" and other properties of animate but don't seem to figure out what exactly needs to be done.
$(".m-menu").toggle(function() {
$('#mobile-menu-bg').animate(
{ right: '0', speed: '1500' },
1500
//{ duration: 500, queue: false },
);
$('#page-wrapper').animate(
{ 'margin-left': '-80%', speed: '1000' },
1000
//{ duration: 500, queue: false }
);
}, function() {
$('#mobile-menu-bg').animate(
{ right: '-80%' }
//{ duration: 500, queue: false }
);
$('#page-wrapper').animate(
{ 'margin-left': '0' }
//{ duration: 500, queue: false }
);
}
);
Please help

Animating several elements at the same time?

I saw another post on here saying this would work - and it's definitely not. Wondering why these are not all executing at once?
I am simply trying to get the top and opacity animations to happen at once. Here's a fiddle: http://jsfiddle.net/DU8N2/
$(".wordcar").animate({
top:"32px"
}, { duration: 2000, queue: false });
$(".wordcar li.next").animate({
opacity:"1"
}, { duration: 2000, queue: false });
$(".wordcar li.current").animate({
opacity:"0.2"
}, { duration: 2000, queue: false });
$(".wordcar li.ondeck").animate({
opacity:"0.2"
}, { duration: 2000, queue: false });
$(".wordcar li.previous").animate({
opacity:"0.0"
}, { duration: 2000, queue: false });
It's not in a queue. Try setting the fade animations duration: 1000, instead of 2000 and there you have your magic.

jQuery Knob hover animation

I want to animate the Knob circle that it fills up on hovering. I'm new to Knob so i have no idea where my error is or if i even have the right direction. Right now it does not even show a circle :(
Basically i just want to have a circle around an icon that fills up on hovering. Maybe i can achieve that easier?
This is the sollution of it plus a little fix that i will start and stop at the right values, so you can interupt the animation without breaking it
the HTML:
<input type="text" value="0" id="circle" />
the Javascript:
$(function() {
$('.circle').knob({
min: '0',
max: '100',
readOnly: true,
displayInput: false
});
$('.circle').parent().hover( function() {console.log("hover");
$({ value: $('.circle').val() }).animate(
{ value: 100 },
{ duration: 300,
easing: 'swing',
progress: function() {
$('.circle').val(Math.round(this.value)).trigger('change');
}
});
}, function() {
$({ value: $('.circle').val() }).animate(
{ value: 0 },
{
duration: 300,
easing: 'swing',
progress: function() {
$('.circle').val(Math.round(this.value)).trigger('change');
}
});
});
});
Here is the JSFiddle
you need to change the hover handler to the parent of #circle or change displayInput to true
$(function() {
$('#circle').knob({
min: '0',
max: '100',
readOnly: true,
displayInput: false
});
//$('#circle').parent() is the new div that contains the input and the canvas
$('#circle').parent().hover( function() {
$({ value: 0 }).animate(
{ value: 100 },
{ duration: 1000,
easing: 'swing',
progress: function() {
$('#circle').val(Math.round(this.value)).trigger('change');
}
});
}, function() {
$({ value: 100 }).animate(
{ value: 0 },
{
duration: 1000,
easing: 'swing',
progress: function() {
$('#circle').val(Math.round(this.value)).trigger('change');
}
});
});
});//you need to close with ');'
you need to include the knob.js in the fiddle or else you get a '404 Not Found' error and include jquery or else you get this error 'Uncaught ReferenceError: $ is not defined'
http://jsfiddle.net/dWsuP/1/

Categories