Foundation.mozilla.org: Buyers Guide: Creep-O-Meter animation
Feedback from Tais' usertesting found that users felt the current simple face animation didn't really represent their feelings of being creeped out. Would be good to draw out more creeped out keyframes and uplevel animation to something a little more rich.
Examples of richness, not creepiness:
- https://dribbble.com/shots/3039000-Hello-Dribbble
- https://dribbble.com/shots/3025343-Animatiki-Animated-iOs-Stickers
Please do it in your own style, these are just examples.
kristinashu
All 10 comments
@beccaklam @kristinashu before I start animating anything鈥攄o you think these 5 'key' faces convey better emotion/ understanding of creepiness? I'll also put them on redpen if you want to leave comment in there. https://redpen.io/p/wfa33bfccd9fe4f98e
natalieworth
on 27 Sep 2018
faces_v-3.ai.zip
@beccaklam There is the .ai file too for the faces (if you want to mock them up to see how they look in your comps).
natalieworth
on 27 Sep 2018
This is gonna be amazing!
Some notes from convo with @gvn:
- he needs one svg face to test with
- we will have about 30-40ish faces in total (but will have some back and forth to figure out how to balance smooth animation with load-time and effort)
kristinashu
on 27 Sep 2018
Added 2 other more subtle options of the emoji styles in redpen. https://redpen.io/p/wfa33bfccd9fe4f98e
cc @kristinashu @beccaklam
natalieworth
on 27 Sep 2018
Creep-o-meter draft!!! AH! It's been tricky to get the transitions to not look weird, but hopefully if it's sliding it'll be less weird:
cc @kristinashu @beccaklam
natalieworth
on 3 Oct 2018
whooaaa @natalieworth so cool and smooth :)
Yeah the only weird thing is the teeth that come out from the creeped out face to the happy face. but does it even need to transition between the two? wouldn't it just go backwards?
beccaklam
on 3 Oct 2018
@beccaklam Yah! It could essentially only go back and forth, so it wouldn't have to loop seamlessly.
natalieworth
on 3 Oct 2018
Soo cute and expressive!
kristinashu
on 4 Oct 2018
Documenting these files here:
5 key faces (svg):
5-faces.zip
Exported individual frame pngs:
face-png-animation.zip
natalieworth
on 5 Oct 2018
Sweet! I think this is all done and amazing.
Please reopen if you still need it tho!
kristinashu
on 10 Oct 2018
Related issues
kristinashu
路
5Comments
kristinashu
路
5Comments
xmatthewx
路
3Comments
taisdesouzalessa
路
5Comments
mmmavis
路
4Comments
Most helpful comment
Creep-o-meter draft!!! AH! It's been tricky to get the transitions to not look weird, but hopefully if it's sliding it'll be less weird:
cc @kristinashu @beccaklam