Check out a free preview of the full SVG Essentials & Animation, v2 course

The "Context Switching" Lesson is part of the full, SVG Essentials & Animation, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Sarah shows some examples where animation helps to switch the context of what the user is viewing.

Preview
Close

Transcript from the "Context Switching" Lesson

[00:00:00]
>> Sarah Drasner: Another thing is that this is an article I wrote where it has more information. This is the thing I meant to click which is this pen. So if I have this contact form that's in this kind of map marker thing. And I have a bunch of information about the contact and then I click contact and the contact moves over.

[00:00:22]
And then we have the email and submit, I type here, I click submit and those become the loaders, which in turn become the success. And the only time you saw a bounce in that entire animation was that green part, was that this is different, something good happened. And again when we talk about that spatial information, if I said to you where is the contact form, you'd say it's in there.

[00:00:52]
But there is no in there, they're just form elements and absolute positioning and stuff like that, right? It's just all tricks and stuff, it's all just on the page or whatever. But the idea that the people know where something is and where to go get it and to know how to work with that flow is a really important one.

[00:01:14]
>> Sarah Drasner: Another thing that's really important for context shifting is this idea of isolation. If I look at these three panels and I try to read them all at once, it's kind of hard to do. But if I isolate one of them, all of a sudden I can read it a lot better and I can understand it a lot better.

[00:01:29]
So we're always scanning the environment around us. If we have to scan too much, it's very confusing for us, and if we can isolate that just a little bit then people can pay a little bit more attention to it.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now