For Web Developers, Designers
For many designers and front-end developers, CSS animations and transitions are the first stop in a long journey of motion design discovery. What seems simple at first glance is actually riddled with new concepts like easing and hardware acceleration. This cat-themed workshop gives students hands-on exercises mastering the basics while exposing some of the core theories of traditional animation and some of the more complex performance topics.
About Rachel Nabors:
Rachel Nabors is an interaction developer and award-winning cartoonist. She travels the world, speaking about web animation and giving workshops. Her articles on the topic have been published in Smashing Mag, A List Apart, 24 Ways, and Net Mag. When not biking around her home city of Portland, OR, she makes interactive comics at her company Tin Magpie publishes Web Animation Weekly. You can catch her as @rachelnabors on Twitter and at rachelnabors.com.
Key take aways:
- Handle and manipulate play state
- Animate spritesheets with only a few lines of code
- Create your own custom timing functions
- Add subtle parallax effects by transitioning transforms
- Chain animations
- Avoid and test for animation performance issues
- CSS animations and transitions mastery
- Building complex keyframe blocks with little code
- Stacking animations with delays
- Chaining animations with event listeners
- Transition callbacks
- Performant animation tricks
- Testing performance with dev tools
- Using cutting edge dev tools to inspect and tweak animations and transitions
- How easing works
- Create your own custom cubi-beziers
This online workshop is intended for designers, developers and everybody else who is dealing with web animation. You should at least be familiar with some basics of CSS.
The workshop starts on June 30th, a 9AM PT, being held at gotowebinar.com. We'll send you the registration details after purchase.
A recording of this session and its exercise files will be provided after the workshop.