Hi,
I want to reproduce the "scale effect/disapear effect" that you can find in the messenger app from facebook when you touch/scroll throught your messages on mobile (i'm on android)
To explain the effect : when you touch the screen and start scrolling the local action scale down and disapear from the center, then when you stop touching and scrolling the same button show back again with the same animation - like a reverse.
Actually i'm not a pro with javascript ; I tried something using hammer.js and started with greensock but i don't get the results i want.
When i touch the screen the animation starts, but my button rotate (i don't know why ) - is the problem coming from the matrix property used by greensock ?
also how can I proceed to make my animation completely done even if the user only touch the screen and don't scroll ? for now if you only touch the animation stop in the middle of the scale animation.
Hope you can help me, have a nice day
ps: Excuse me in advance for my english
var localAction = $('.local_action'),
tl = new TimelineLite();
//here i try to reproduce the effect
tl.to(localAction,0.3,{css:{
scale:0,
//transformOrigin: '50% 50%',
//autoAlpha:0,
z:-300
},ease: Elastic.easeOut.config(1.2, 0.5)});
tl.pause();
//touchstart and touchend are from hammer.js
$('.scroll_container').bind('touchstart', function(ev){
tl.pause();
tl.play();
});
$('.scroll_container').bind('touchend', function(ev){
tl.pause();
tl.reverse();
});