Develop Reference

Swipe element down and up to delete/remove element using hammer.js and jQuery?

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' });
});

jquery animate simultaneous with 'html,body' scrolling/animation

I'm trying to animate two things at the same time. one is
var submenuHeight = parseInt($("#submenu").height());
console.log(submenuHeight);
var scrollOffset = parseInt($(window).scrollTop());
console.log(scrollOffset);
scrollOffset = scrollOffset - submenuHeight;
console.log(scrollOffset);
$("#submenu").animate({
height: '18px'
}, {
duration: 250,
queue: false
});
$('html, body').animate({
scrollTop: scrollOffset
}, {
duration: 250,
queue: false
});
<div id="submenu"></div>
the side then includes lots of text. I want to be able to close the menu but stay at the same piece of text, meaning animate the scrolling to the same part of the page.
but weirdly this animation does not work simultaneously even though I set queue to false. what might be going wrong?

How to .animate an object when its visible for the user

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();
}
})
);
})();

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));