I'm trying to create a sequential animation using velocity.js that loops 3 times and stops.
In the example below I've queued nested functions to create a sequence one after the other. Then tried to loop that function 3 times using a 'for loop' but its only running once.
I should mention I've only just started learning javascript. I've opted with velocity.js for web animations as an alternative to using Flash for banners etc.
Erroneous code so far:
var i = 0;
var loopNo = 3;
function anim8() {
$( "#logo" )
.velocity( { width: "260px", opacity: 1, left: "20px", top: "80px" }, { delay: 0, duration: 1000 } )
.velocity("fadeOut", { delay: 1000, duration: 1000 })
.queue(function() {
$( ".copy" )
.velocity({opacity: 1, translateX: "300px"},{duration: 1000})
.velocity("fadeOut", { delay: 1000, duration: 1000})
.queue(function() {
$( "#img" )
.velocity({opacity: 1, translateY: "300px"},{duration: 1000});
$( ".outro" )
.velocity({opacity: 1, translateX: "-190px"},{duration: 1000});
$( ".button" )
.velocity({opacity: 1, translateY: "-70px"},{duration: 1000});
});
});
}
$(document).ready(function(){
for (i = 1; i < loopNo; i++) { anim8 (); }
});
I'm sure the answer is going to be obvious to someone but have spent a few hours without progressing. If you can explain the correct way to loop an animation of nested sequences that would be great!
Live demo: JS-BIN
Related
I switched from anime.js to velocity.js and try to defnine a simple animation with delayed opacity. For this I use the stagger.
But if I put a function for the stagger delay in it, I have no delayed stag animation. every elemenet is popping up but not animated and delayed.
In the first i tried what I have used for the animation with anime.js and the second one is directly from the github issue.
Here is also my jsbin:
https://jsbin.com/firetuh/edit?html,css,js,output
var greenElem = $('.pointGreen');
var yellowElem = $('.pointYellow');
var redElem = $('.pointRed');
setInterval(function() {
greenElem
.velocity({
fill: '#5cb83f',
opacity: 1
}, { stagger:
function(elem, index) {
return index * 500
}
});
yellowElem
.velocity({
fill: '#feb65c',
opacity: 1
}, { stagger:
function(elementIndex, element) {
return 1000 * (0.85 - Math.exp(-elementIndex/10));
}
});
redElem
.velocity({
fill: '#d43f3a',
opacity: 1
}, { stagger: 500 });
});
It looks like this could be either an intentional oversight or a bug with velocity. It looks like from the code that stagger only works if the first value passed in is a pre-canned effect like fadeIn or transition.slideLeftIn - it doesn't look like it is supported for other animation types. You could, in theory, achieve this on your own with something like
yellowElem
.each(function(index, element) {
$(element).velocity({
fill: '#feb65c',
opacity: 1
},{
delay: index * 500
});
});
Also, you will want to change your setInterval to setTimeout
I'm trying to swipe an element up/down to delete it.
I am using hammer.js and jQuery.
So far I can delete the element using swipe left/right which works fine.
But I need to achieve the exact same thing using swipe up/down.
I have created this working example here:
https://codepen.io/anon/pen/YJPPyB
click on the button and an element will appear and then Swipe left/right to delete it.
With the code above, I tried the followings but it doesn't work as expected:
$toast.animate({ top: event.deltaX, opacity: opacityPercent }, { duration: 50, queue: false, specialEasing: 'easeOutQuad' });
and
$toast
.removeClass('panning')
.animate({ bottom: 0, opacity: 1 }, {
duration: 300,
specialEasing: 'easeOutExpo',
queue: false
});
Can someone please advice on this issue?
Thanks in advance.
EDIT:
When I change this:
hammerHandler.on('pan', function (event) {
To this:
hammerHandler.on('pandow', function (event) {
I can move the element when I pandown but I dont know why it is very wonky!
This is how I swipe down now but it somtimes freezes the whole page and I dont undertand why!
hammerHandler.on('pandown', function (event) {
// Change toast state
$toast.addClass('panning');
var opacityPercent = 1 - Math.abs(event.deltaX / activationDistance);
if (opacityPercent < 0)
opacityPercent = 0;
$toast.animate({ marginBottom: event.deltaX, opacity: opacityPercent }, { duration: 50, queue: false, specialEasing: 'easeOutQuad' });
});
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 am learning how to schedule animations via JavaScript, especially with the help of jQuery. I tried to blink some h1 tags, but the animation doesn't seem to run fluently. It stops for a while and then go on.
The core animation code:
function animSlideHeading() {
$('.slide h1').animate({
opacity: .6
}, 500, 'swing', function() {
$('.slide h1').animate({
opacity: 1
}, 500, 'swing', animSlideHeading);
});
}
See this JSBin.
There are several elements matching the selector $('.slide h1'), so the callback is called multiple times, once for each element that is animated, and animSlideHeading runs more and more times the longer it goes, messing it up.
To solve it, you can use promises that resolve when the animations have completed for all the elements in the collection collectively
function animSlideHeading() {
$('.slide h1').animate({
opacity: 0.6
}, 500, 'swing').promise().done(function () {
$(this).animate({
opacity: 1
}, 500, 'swing').promise().done(animSlideHeading);
});
}
animSlideHeading();
FIDDLE