Rachel pulls a couple examples from film editing and applies them to user interface design. A jump cut is a sharp transition. Typically there isn’t any animation involved and the result is immediate. “In-betweening” is the technique of adding animation to clue the user into where an element came from and help set the expectations of the user interface.
(light music)…- So, let's talk a little bit more…about those stateful transitions.…Now, Silicon Valley has been carefully studying…and using motion design…in operating system UI since the early 90s.…First, before we talk about why,…we need to understand a concept called the Jump Cut.…You may have heard me use this expression.…Now, this is from film, it describes…when the camera cuts directly to a different perspective.…For instance, a different angle or a different screen,…no fade, no movement, moving the camera is called a pan.…
It's common in dramas,…it's common for showing conversations.…I've got something from the public domain here.…Notice how we've got this establishing shot…of the two people,…and now we've jump cut to his face, right?…We're looking at his face, he looks to the side,…and now when we jump cut to her face,…we're assuming, 'cause we had that little,…early on directors figured…that they learned a couple of tricks.…One was that if you jump cut in the direction…that a person, an actor, on screen is looking,…
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 46s Beginner
Design the Web: SVG Rollovers with CSSwith Chris Converse23m 47s 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.