reproduce the local action of messenger app

[olivier 0 Likes (Newbie)]

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

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

It would really help to see a demo of the code you are using that we can also edit. CodePen works great for this as explained here: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/?view=getnewpost

 

Also a video of the effect you want to achieve could help too as I'm not quite sure I understand the desired result.

 

Also, for something like this our Draggable tool may be a big help: http://www.greensock.com/Draggable

[CraigWheatley 49 Likes (Newbie)]

Are you refering to the 'new conversation'/action button on messenger? If so this is a start to what you want:

 

See the Pen EKzYVV by craigster1991 (@craigster1991) on CodePen

 

This uses Draggable as mentioned by Carl to allow the list to be dragged up and down. Then using the events from Draggable we simply play/reverse the button scaling animation.

[olivier 0 Likes (Newbie)]

Sorry I didn't answer earlier. Yeah Craig and Carl , you right ! that's precisely what I want to reproduce ! I'll try this  

 

Thx