UI/UX animations make the transitions between contexts more obvious and meaningful. Whether hiding navigation or submitting a form, animations can add a sense of purpose and fill any delays that may exist between screens. Sarah shares a few example and gives some guidelines for when to use animations.
(electronic music)…- UI/UX Animation versus Standalone and Interaction.…This is going to get a little bit into theory stuff…because I kinda wanna talk to you about how to animate…your UI, but I don't wanna just be like,…'yeah, then make every menu flip across the screen…'and roll and rotate.'…That's not very responsible.…So we're going to talk about, just for a second...…
This pen.…I used Sara Soueidan's Circulus tool…to make this menu navigation.…It's a really neat tool and you can just…add menu elements and make one of these pretty simply.…So that's really awesome.…I'm gonna make a distinction here between UI/UX animation…and Standalone animation.…So a lot of what I've been teaching you so far…has been Standalone animation where it's contained…within itself and it doesn't deal with anything else…and it's not a menu moving or anything like that.…
One thing that UI/UX animation does really well…is help with context shifting.…And I'll get more into that in a second.…There's a really good navigation example at Concrete Matter.…
Note: This course was created by Frontend Masters. It was originally released on 2/19/2016. We're pleased to host this training in our library.
- Paths and groups
- Platonic shapes
- Optimization and CSS animations
- SVG sprites
- Atmospheric and elemental motion
- GreenSock workflow
- Staggering animations
- UI/UX animation vs. standalone
- DrawSVG and motion along a path
- Animating text and relative color values