[RESOLVIDO] [MOBILE / PWA] Menu - Slider estilo WhatsApp

Salve salve!

Eu queria fazer um Menu estilo whatsApp:

Spoiler

/applications/core/interface/imageproxy/imageproxy.php?img=https://github.com/gabrieldarezzo/menuTouch/blob/master/gifs/ezgif.com-6cf6f79c5d.gif?raw=true&key=015d62bff273dfe758f44570b845b881092a655dd988134508da97c381b31eed" />

O mais próximo que cheguei foi isso: (LIVE DEMO)

http://gabrieldarezzo.github.io/menuTouch/

Source completo:

https://github.com/gabrieldarezzo/menuTouch

Alguem tem alguma dica de Plugin/jQuery/Angular ou qualquer PWA que tenha o mesmo comportamento?

Basicamente tentei dividir o 'problemão' em problemas menores...

O menu do Whats tem:

(Feito) Opção de clicar direto pelos menus

(Feito) Opção de Arrastar o touch/mouse

Animação da borda Bottom (já me indicaram a do Sergio Lopes, então acho q me viro daqui pra frente...

Empurrar todo o box div para a direita e simultaneamente o outro para a esquerda.

Então basicamente vou ter 3 divs correspontende a cada item do menu:

<div class="tab-content">

	<div id="recados" role="tabpanel" class="tab-pane fade in active" ng-swipe-right="menuInschoolRight(this)" ng-swipe-left="menuInschoolLeft(this)">
 Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
	</div><!-- / #recados -->

	<div id="avisos" role="tabpanel" class="tab-pane fade in" ng-swipe-right="menuInschoolRight()" ng-swipe-left="menuInschoolLeft(this)">
 aralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
 Ntate inalterado. Se popularizou na década de 60, quando a Letrase
	</div><!-- / #avisos -->

	<div id="eventos" role="tabpanel" class="tab-pane fade in" ng-swipe-right="menuInschoolRight()" ng-swipe-left="menuInschoolLeft(this)">
 Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
 inando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo aqui", fazendo com que ele tenha uma aparência similar a de um texto legível. Muitos softwares de publicação e editores de páginas na internet agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por 'lorem ipsum' mostra vários websites ainda e
	</div><!-- / #eventos -->

</div><!-- / .tab-content -->

	 

	Minha duvida principal é como fazer esse comportamento do SlideIn /Left  + SlideIn /Right, to estudando até Theread pra vocês terem uma noção... hahaha

	Enfim qlq luz ta valendo, abraço a todos.

	 

	 

	 

	 

	Quem quiser pode dar uma olhada no resultado:

	[https://github.com/gabrieldarezzo/menuTouch](https://github.com/gabrieldarezzo/menuTouch)

	 

	Outra opção:

	[http://materializecss.com/tabs.html](http://materializecss.com/tabs.html)

	(Abas) / swipeable