Using the band website http://www.alovelikepi.com, Rachel summarizes the various animation design patterns discussed in this section. She also spends a few minutes answering some audience questions.
- So, let's have a moment to review a site…that I'm a big fan of,…and it has music so I'm gonna have to mute it.…It's a band site,…and get this,…one of the members of the band…used to be a Flash developer.…So, when they needed a site what did he do?…He built it using SVG and a heck of a lot of animation…but it's also a really great example…of some sophisticated animations.…Let's go on an animation safari…and I genuinely wish I had a little safari hat…I could put on right now but I don't…but we're gonna go on a little animation safari…and see how many supplemental animations…and transitions and causal effects we can spot.…
Ready?…Boom.…The band is A Love Like Pi,…and as you can see…it's got this beautiful central animation.…It's a showcase, so it's decorative but it makes sense…and when we click on this button up here,…notice that there's a stateful transition…over to this other section…to show people where they are in space,…and that they're seeing something new.…When you close it, notice it transitioned out perfect.…
Note: This course was created by Frontend Masters. It was originally released on 09/15/2016. We're pleased to host this training in our library.
- CSS transitions and animations
- Using animation in product design
- Creating a sprite animation with CSS
- Stateful transitions and supplemental animations
- Using developer tools to manipulate animations
- Jump cuts and in-betweening
- Static vs. dynamic animations
- Designing performant animations
Skill Level Intermediate
Design the Web: CSS Animated Rolloverswith Chris Converse29m 42s Beginner
Design the Web: SVG Rollovers with CSSwith Chris Converse23m 43s Beginner
1. CSS Transitions
2. CSS Animations
3. Animation in Design
4. Stateful Animations
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.