Jump to content
Search Community

reproduce the local action of messenger app

olivier test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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();
        });
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...