Message Accordion Expansion

In this tutorial we make a beautiful and stylish accordion expansion animation for a message application.

Download assets
Similar tutorials
  • Contextual long-press menu

    How to create a contextual long press menu prototype in Pixate that activates and responds...

  • Twitter profile

    In this tutorial we're replicating Twitter's profile view, tweet detail view, and photo ...

  • Tinder card swipe

    A tutorial on how to recreate the famous card swiping interaction in everybody's favorite app to pretend that they don't use – Tinder!

  • Top comments
    1. Cody Arsenault3 years ago

      Awesome tutorial!

      A quick question.

      Instead of having a back button, how would you implement the same animation with a simple tap anywhere on the open-message to bring the user back to the feed.

      It's easier for me to tap the message instead of the back of button. (6plus)

      • Jared Lodwick3 years ago

        Thank you, Cody!

        You could move that back button layer to anywhere you want and resize it however you want to make it work best for you. So if you want to tap on the body copy you can place it over that. It'll still function the same.

        I'm also playing around with making a tap and drag gesture to close it (think of how closing photos works on the Facebook app) but as you can imagine there's a lot of moving parts to get that to work. Perhaps I'll do an additional tutorial onceI get that working.