Take a look to analysis the animations which these affects got

1.When quickly touch to the button, the like emoticon will change from the grey border with transparent background to blue background and the text Like next to the emoticon is the same too. And the animation, in this case, is the like emoticon tilt right, then tilt to the left and finally back to the original position, the text zoom out, then zoom in and then zoom out again to back to original size.

2.If you long touch the button, it will process in another direction. The like emoticon in button will tilt to the left a little bit and the text be to zoom out. At the same time box of group, emoticons appear and six emoticons are pushed up. Notice that the emoticons will be pushed up with order and zoom in until they lined up neatly. And if user doesn’t drag to anywhere but just release then, the button will be back to original status.

Emoticons be pushed up in order

3.However, if you drag your fingers, the emoticon you’re focusing will be zoom in to about 3/2 times the origin and others will zoom out a little bit (and the box will be zoom in too). In addition, the short description text at the top of focusing emoticon will appear and come up with the emoticon.

4.You should notice that the drag area is not unlimited, if you drag too far from the box, the emoticon will lose focus and the size will be back to origin when they are pushed up. And if you come back to the drag area, you’ll focus the emoticon again. Uncomment the line at 776 (color: Colors.amber.withOpacity(0.5)) to show the touch area for clearer to trace if you want.

Drag area is the yellow

5.After long touch, if you release your fingers without any emoticon be chosen, the box will be disappeared and emoticons will be lower in order (reverse with time they were pushed up). In case you not choose any emoticon, the like emoticon in button will tilt left and text is zoom in to back to original position/size.

6.But if you focus to particular emoticon and release, that emoticon will move to the button with the curve and zoom out until it disappears. At the same time, the color of border, text and the emoticon in button will change too.

7.Finally, the last thing we need to do is add the sound well-timed with every animation.

At here, you can think that everything is pretty simple,…….yeah you’re right, but our biggest issue is that how to combine every animation together and make it work most similar like the origin FB does. If you would like to get the answer, please continue with me now 💪