THAT'S ME! Happy to answer any questions if you have any. I mean about anything. Anything.
Q:How tall is your dad?
A: Uh, I don't know, like 20 hotdogs tall?
Hi Pasquale! I think you are a cool dude.
Q: Do you always avoid linear easing as a hard rule, or are there ever situations where it makes sense to use a linear timing function? Sometimes I use linear easing for animating color/opacity, but never for position/scale. Do you have any rules for choosing what kind of easing you will use or do you just "feel it out" each time?
Avoiding linear easing helps an animation designer to consider the spacing of frames between A & B, but it's certainly not a hard rule.
For example: Color & Opacity make sense to animate linearly since we're not looking at a displacement. Squashing the rate of change can render some weird results if you decide to try something non-linear. On the flip side, an exponential decay on a cross-dissolve/dip to black gives you the ability to soften out a fade which might otherwise require more frames in a linear pattern.
Most times, I work with animation in a 'blocking' stage, take it to linear, and then time it last. What the hell is 'blocking' you might ask? This is a more complicated example (by Victor Navone) in the context of character animation, but you'll get the gist: http://www.navone.org/HTML/Tutorial_Splines2_3.htm
THANKS PSQL! That makes a lot of sense.
I lol'd at the slide pun.
The tone you used to criticize other people's work really bummed me out. Publicly shaming other designers for mistakes in their work doesn't make anyone better. I'm not huge fan of what Facebook is doing, but I was still irked to hear cheap remarks from someone I look up to.
I agree with the content of what you're saying. Yes, there are inconsistencies, they are pretty bad. But they are building something that works for a billion people (and their browsers), it's not an isolated app that works on a consistent platform (the iPhone). Obviously the challenges are different.
Cemre - Perfectly valid criticism/points.
My reasoning to speaking with such a tone is as follows:
A billion people - big whoop! Throw that pedastal out the window. There's also 70+ product designers at the company and a countless number of bright engineers. If anything, this should be a reason for them to push harder. I see a responsibility to do better with more people's experiences at stake. My point about animation inconsistencies at Facebook is that there is focus on the wrong place. There's thought about animation in parts which are so insignificant, and could be applied to more significant areas with the same amount of work. I've traditionally been extremely critical of Facebook, but not always against everything that they've been doing. There are some great things coming out of there too.
I wouldn't go as far as calling it shaming over cheeky criticism. I didn't design this talk for babies. If I were to dish this out with a whimpy attitude, it would resonate many magnitudes less and be swept under the rug. My goal was to produce an entertaining, informative & impactful talk that people would pass around. If I pussied out, there'd be no way people would care. People have talked about this in the past, but half-assed their enthusiasm. My goal was and never will be to please everybody. It's to inspire the right people to open their eyes and think differently.
One of the biggest problems I see with our industry is that people take criticism personally. Especially in the case where the parent company is being criticized for ideals, and not the individual people. They get butt-hurt and cry about things, instead of taking it as a positive and improving.
People need to harden the fuck up! It's not personal. I'm a strong advocate of not only dishing out criticism, but also receiving lots of it and doing better things with it.
I appreciate your criticism.
Wow. Such video. Many knowledge. (seriously though, killer stuff in here man)
Much thanks. Very pleasure.
Also, more animation book tips. Christmas is coming and those books make great presents :-)
Additional Books: http://www.amazon.com/The-ILLUSION-OF-LIFE-ANIMATION/dp/0786860707
Also, less about animation timing, but more inspiring - Any of the "Art of" books by Pixar. The Art of The Incredibles would have to be my favorite of all time.
A hero is you.
Hey Pasquale, cool stuff! Do you have a link to the full Disney/Tarzan documentary?
Hey Koen, thanks dude!
Also thanks for making FramerJS. More people like you need to be making more things like it.
Yes, here you go: https://www.youtube.com/watch?v=vdwByOaft3o
Great talk Pasquale! In my experience animations/transitions are unfortunately often an afterthought, a sprinkling of fairy dust after the hard technical requirements are met (user needs to be able to do X) and often when the end of the budget is in sight.. If you start the process of designing with transitions in mind, how and when do you show them to a client? Should you design a static interface and create an abstract animation prototype to explain how it would transition between states? Or would a fully designed animation prototype (like we saw of Facebook Home) be what you would show the client? And how do you then explain it will take another six weeks (for example) to actually built the thing they just saw functioning perfectly?
I usually show off animations to a client in video form. It's a hell of a lot of work to be able to pass along a working motion prototype that's interactive & will work out of the box.
Most times when I'm approached about interactive animation work, it'll be from somebody who already understands that it is a pretty new space to be working in. I like shooting videos describing the action. Often times, it's not feasible to spend the time implementing a FUNCTIONING prototype. As much as I can, i'll try and get the essence of the idea across using whatever efficient means I can.
Nathan from Flinto had an interesting quote from one of our discussions about the idea of 'gesticulating wildly': http://blog.flinto.com/dont-just-throw-it-over-the-fence.html
As for explaining that it could take a long time to implement - that's a tougher one. I think you just need to be clear right off the bat that animation is bloody hard & time consuming.
Thanks for the reply.
I can see how video would be a nice way to show what you have envisioned without having to actually built a functioning prototype. I'm not sure if it would be my weapon of choice (at this point I just know too little of animating for video to produce it—I could probably be quicker off building something that works in one browser for demoing purposes).
Your and Nathan's idea is similar to our preferred work-method (scrum/agile). Closely working together with the developers helps getting the animations into the work at an early stage without it being thrown in at the last minute. But it doesn't help with educating the client about how animations will support the design (animation as a clue).
I guess it comes down to a combination of faith by the client, a good portfolio of projects to back up your claims and developers that understand the added value of transitions/animations.
I am about to embark on this 50min beast of a video and I am so excited. You and all the dudes at Elepath leave me hungry for more whenever I see behind the scenes photos, process pictures, studio shots, videos, articles and whatever else y'all make.
I really admire your team and the work you create, stay up!
Thanks for the kind words!
Make sure to strap in tight. I hope you have your favorite snacks near by dude. I'd love to hear your thoughts/questions after you let me blast a wave of animation into your eyes & ears & heart.
That was seriously great, I love hearing about this stuff because cartoons/animation have always been in the back of my mind as a kid. The "Transitional Animations" article and this video have definitely sparked up that interest.
That's really cool you got to mentor under that Disney animator when you were so young, do you have interest in working for Disney or a big animation studio like that or is your heart in creating products?
If you are ever in Seattle hit a brotha up and we can kick it!
PS: I was dyin' at the Blumbler post: "10 ways to get a girl to kiss you on the mouth, click here" and the dog underpants, hahah.
I am currently pushing for more animation based interfaces where I work, so this video was full of a ton of great advice! Been using a lot of motion tests created in After Effects in the last few months as I hand off deliverables to the dev team. Not much to say other than I'd love to see more advice/concepts/badass shit from you in the future!
Hell yeah! Don't stop!
I'm planning on writing & showing much more now that I've seen that more designers are excited to read/watch/share/discuss animation + interaction.
Awesome video. You're definitely inspiring me to step my animation up. For others looking for easing functions, here is a good site: http://easings.net/
You are one of the awesomest dudes out there. Thanks for putting this together! It was great to hear a bit about your background along with the wealth of information you shared.
Keep on doin' what you're doin'. You're a huge inspiration. Hope to run into you sometime and/or hear you give another presentation!
Thanks dude, that is a real nice thing to say. That get's me excited to share more ideas!
Hey hey hey Pasquale!
First, LOVE CHUR STUFF
Second, any advice on animating pixel art? I've been practicing adding more dimension to my sprites (for example) by not only animating the sprite but its shadows as well, but would be curious what advice an experienced animator like you would have to give regarding this particular genre of animation.
Advice on pixel art — The animation principles are all the same no matter which medium. Consider working out ways to describe volume & form more effectively. A little Squash & Stretch + Overlapping action will go a long way, even for the most simple constructions of form.
Plot it out on paper / a rough digital sketch and get it to work there before committing to putting down the laborious pixels. If it works rough, it'll only work better when you detail. Work from the general to the specific!
Hope this helps!