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.
- Draggable is pretty cool.…So you have this basically like a really, really…small amount of code to do a lot of really cool stuff.…Draggble create and type X,Y, so you can make it…just go along one x-axis or a y-axis and there's…edge resistance.…You can add the throw props plug-in, too…and throw it with some beautiful emotion.…You can set bounds so you can make it only hit…into one container.…
It's device enabled for touch screen which is awesome.…You can impose bounds, like I was saying.…If you set throw props to true you have some momentum…and fake physics kind of stuff.…There's a hitTest to sense if elements…are touching each other.…This is really good for when you need that kind…of interaction, but there's some gotchas with SVG…that I'll talk about in a second.…It does honor transform origin which is cool,…and it still works on transformed elements.…
So even if you take a thing and make it much smaller…it's still gonna work on that amount of space.…You can lock movement to a lock access true.…It's GPU accelerated and request animation frame driven.…
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