It’s hard making animated profile images/videos lifelike

Hubert
Hypenotic
4 min readOct 12, 2018

--

Instead of static images, some teams are using videos to present their members. Motion can be used to liven up the representation of team members, but motion can also communicate what a person is like by displaying non-verbal cues.

There are many obstacles to doing this well, and in the end, the effect may not even be desirable.

The Walkthrough

You could have the videos just play and then pause on the last frame.

The contrast of motion vs stillness is jarring, even if it is just a person standing there and blinking. One second they are shuffling, swaying, and blinking semi-regularly, and then the next, they never shuffle or sway again.

Like they looked at Medusa or something.

You could loop the videos.

The video clip could play, looping over and over again, having the clip jump from the last frame to the first frame. If you think the jump wouldn’t be too jarring, that’s great and you should definitely do that.

To get a seamless looping video of a human being, its often easiest to play the video and then play the video backwards to get back to the starting frame.

The first problem presents itself when motion is reversed while the subject is already moving — they will seem to be jumpy and move unnaturally.

A possible fix: the subject has to stop moving for at least a couple of frames. This is called easing, and is a fundamental part of the vocabulary of motion. There should be deceleration before the clip is reversed and re-accelerated backwards.

by ethian on GameMaker Community

Doing this in After Effects, you can use time remapping to ramp down the frame rate before reversing directions, but this would mean also slowing down the frame rate past the lower threshold for persistence of vision to take effect, breaking the illusion of motion. Filming in higher framerate wouldn’t help either, since you need to slow the framerate to 0 in order to play the footage backwards. Good places to ramp down are when the subject is standing the most still, as changes between frames at a slower frame rate will be less noticeable. It still won’t be perfect though. And frame interpolation is “good”, but isn’t good enough at speeds where you can make out all the detail in each frame.

The second problem is that when video is reversed, it creates a temporal symmetry, which becomes incredibly obvious to humans, who are keen to non-verbal cues and really pick up on body language and facial expression. You can really tell if a video is being played forth and back, and back and forth, over and over again.

Like Boomerang for Instagram.

A possible fix: have the subject pause multiple times and/or remap the video so the playback forward is at a different rate than the playback backward. Check out these graphs in After Effects depicting time (real world time) on the x-axis vs frame (playback time) on the y-axis:

A simple way to fuzz up the time symmetry: the accelerations are eased in
A more complex way: playback pauses on the way back, making it feel a little different.

Humans don’t loop (and humans don’t randomly stop moving)

In the end, in my nit-picky opinion, both of these methods of showing living, moving human beings look kind of weird.

The issue boils down to these videos not seeming naturally human. It almost seems naturally human — it’s very close, but it’s just a bit off. This is an example of something that falls into the uncanny valley.

by Smurrayinchester on Wikimedia Commons

The moving pictures show human subjects, but the motion (looping or not) does not accurately represent a person, making the picture unfamiliar, unsettling, and probably less fit for effective communication than a video that loops but makes no attempt to appear seamless.

Regardless, some people have made real good looping images of human beings. Cinemagraphs.com (Kevin Burg and Jamie Beck) made one that features a dude driving a car with real smooth and lifelike motion. I like this one and I’m not bothered by it, as it is life-like enough to hold its own (keep in mind though, cinemagraphs are their own thing and are used to communicate things that are different to our needs).

At the end of the day, if you watch a video of a human being on loop for a significant amount of time, you will notice, and it will seem a bit off.

https://www.youtube.com/watch?v=CNdAIPoh8a4

Conclusion — What I’m going to do from now on

No more looping. No more strange small motions.

The next time I use animated profile photos as a presentation strategy, I will transition between a candid, lifelike video and an obviously stylized still image. For example, the video would be in full colour and would have the subject making a pose or action, but the still image is black and white and would have the subject doing a different pose/action. After the video is done playing, it can move out of the way to reveal a still portrait of the subject.

--

--