How should I animate-in new messages?


#1

so I don’t have a demo. sorry. yeah. I can’t show you the code i’m using for paranoia purposes. Thanks for understanding.

but here is a mockup


so everytime you type a message or someone else does i want the new one to come in a slick way.
i may have multiple animation options.

I’m trying to get the right “FEEEL” so please, throw me your 2 cents


#2

Welcome @NoahWatchmaker – I think they should fly starwars text style. :wink:

It might help to get an idea of what this app is for and who your target audience are.


#3

Aha, I like it, @HAWK =)

@NoahWatchmaker I find it helpful to stage my thinking: Interaction > Communication > Motion. Understand what they key interactions are you’re building for (What is the purpose of the app? What are users needing to do? How does the structure and flow of the app help them do that?), then determine the best way to communicate that (character of the app, visual cues, etc) and then use motion (which has been considered as part of the design from the start of your process) to tie those together and add the final layer of interaction.

In terms of getting the right “FEEEL”… Disney did some groundbreaking thinking from the 1930s onwards in trying to define how motion can be used to increase engagement, such as squash and stretch, emotional timing, etc. This lead to 12 Basic Principles of Animation, which you may want to familiarise yourself with for ideas and controls: https://en.wikipedia.org/wiki/12_basic_principles_of_animation

To give actual suggestions I’d need to know more about the app, your design process and what you’re aiming for. =)


#4

I think what you gave me really helps. Thanks


#5

Glad to hear it. =)

Keep us posted with how you go and let us know when you have followup questions!


#6

I have a full time job. I’ve made little progress. lol. I think I’m going to get the bare-minimum done for a “complex” animation. That way when I write a UI-kit and framework specialized for animations, I wont have to go back and re-write a whole bunch of stuff.
https://jsfiddle.net/khv0myb0/7/

^this example, for it to be finished the way I want, I’ll have to add something that calculates what the height of the “paper” container will be so that the animation for “portal-wrap” will be exact. I’ll have to add in <style> tags dynamically. I guess that’s okay :confused: I already have to do that for some other interesting features


#7

Looking great! What are your thoughts for how new messages get added to the stack?