How Do You Know What Animations Can Actually Be Developed?


#1

In terms of UI or Interaction Design how does the designer know what kind of animations or transitions can be actually implemented on a Web site or in a mobile app by the coder/developer? For instance we’ve seen windows slide in and out of position, buttons pushed, switches slid etc but is there some kind of list or resource that designers can turn to when thinking about how on screen controls behave?

For the Web I think it’s probably all about CSS but I’d be eager to hear a more in depth explanation!


#2

By talking to people who know more than we do! :grinning:

When I first started out, I had similar concerns.

I’ve found that simply talking to developers and more experienced designers throughout the design process really helps me to understand what is technically possible and if there are any limitations. Every situation is different. It’s all about working collaboratively with people who have a different skillset or more experience.

Over time you learn what can and can’t be done and you get better at it. The best resource for this stuff is the human variety.


#3

I have managed to find a few resources on the web by Googlin’ “animation for mobile apps” - one of the resources I liked best was found on two of the search results, this page and on this page as well.

It’s called Animate.CSS and features a pull down menu listing a lot of the different types of animations that are possible along with demo of it actually working right there on the page. (probably not an exhaustive list)

It seems there are a variety of animation “libraries” out there which are used by developers to enable the animations either through CSS or Javascript (there may be other methods too which I am not yet aware of)

I’d love to hear from an actual coder person to learn more!


#4

Keeping a catalogue of stuff you see in the wild can be great for showing devs. Often too they’ll be built with open source plugins that the dev can use.


#5

You’re pretty close! You can do a lot of animating with CSS, some with JavaScript, and some with HTML 5/6 using the canvas element. Combine all of them, and you can do most anything your mind can think of.

If I might suggest it, doing a quick search for “animation” on Dribbble.com is where I normally go to get inspiration for these types of things. If you don’t have an account there, you should start one and select a few designers to follow. It’s a great way find ideas for things you do like, and weed out some concepts you definitely don’t.


#6

That’s a great idea about Dribble, I will definitely check that out and bookmark