Rack focus interaction

In film, rack focusing (or “pulling focus”) is when we shift the focus between subjects in a composition. 

In this lesson, I want to talk about Raiders of the Lost Ark, where Indy’s talking with Belloq who’s saying:

[Belloq] “Our methods have not differed as much as you pretend. I am a shadowy reflection of you. It would take only a nudge to make you like me, to push you out of the light.” 

[Grimur] Wow. Not very nice. But, and spoiler alert, he gets his face melted by the end of the movie. Now. This shot has nothing to do with pulling focus. In fact, the focus is static and remains on Belloq the whole time.

But if we did want to shift the lens’s focus to Indy, that would be racking focus. 

We’re going to take this so much further, because as we scroll, we’re going to shift focus from the background, to my face, then to the coffee mug in the foreground. And we’ll do this in four parts: configure our layout, create a trigger based on scroll, create an animation, then watch the rest of Raiders of the Lost Ark because this movie is incredible.

Let’s start with the layout. And this is pretty straightforward. I have three images, and they’re all set to fixed position. That’s important because I want them always fixed to the viewport even as I scroll.

But two quick notes: I want to select my Body element and set the minimum height to something like 200vh (200% of the viewport height). This is because I actually want to be able to scroll a bit.

And the last note here: I’m dragging in a Div block real quick, and I’m going to name this class Border. And I’m doing this because sometimes images blur towards the edges and they look funky. So by setting this Div block to fixed and using the little full preset, I can now go in and add a border (I’ll make it something like 50 pixels wide, but we can always come back).

Okay that’s the layout. What about the trigger? In interactions, let’s create a new trigger. (We’ll add one when the page is scrolling.) On scroll, we want to play an animation. What kind of animation? A new one that we’re creating right now.

And by the way, that was it for the trigger! Part 2 done. This is great progress! Moving on to Part 3: the animation.

At the top of the page? At 0%? I want my background in focus. So let’s select the Background image, then add a new action here (we want to add an action for filter). And I want to make sure my blur is set to 0. (I don’t want blur to start.) But, I want to go down and make sure that at 100% (when I scroll to the bottom), it’s super blurry. Maybe 20 pixels.

And if we turn Live preview on? We can scroll up and down — and cool! This is a great start. 

Okay, that’s our first one. Let’s actually skip to the coffee, because it’s the opposite effect. We’ll add a little keyframe (an action) at 0%, but this time we’re doing it backwards. (If the background is initially zero blur, then for this, it  should be 20px — full blur). And at 100%? Well, we know the drill: at 100% (when we scroll to the bottom), we’re going to have 0px blur. And with Live preview, one more time, we can scroll up and down and see that now the inverse is happening. Lookin good, past Grimur!

But what about my face? 

[Miguel] Yeah, let's talk about your face.

[Grimur] Exactly, Miguel, this one’s a little more complicated (not my face; but the keyframing). Because it’s not going to be in focus at the beginning or the end. (It’s actually in focus in the middle since my face is between the background and the foreground.) So. Select my face. At 0%, it’s going to have a filter we can add in and the blur here is going to be 10px (at the beginning, it’s not quite as out-of-focus as the coffee mug). And at 100% (when we scroll down), it should have another filter, this time blurring to, well, 10 pixels. Why? Because when the mug is in focus, I have to be out of focus, but not quite as much as the background.

But here’s the key. I want to add one more — one more filter for the middle (when my face is supposed to be in focus). And this time, I’m going to make it zero. (Zero pixels blur.)

Finally, if we click Live preview? And scroll on our canvas? There we have it: focus racking based on scroll position.

That’s part 3. Part 4? I’m going to watch Raiders of the Lost Ark on Paramount Plus. And yes, I get it. 

[voiceover] Look at my face. Not more than a few days after I recorded this footage, Stacy reviewed this video, and told me,

“Grimur, Raiders is no longer on Paramount Plus.”

“What?!” I exclaimed.

“Yes,” she said, “do you want to re-record it?”

“No.” I replied. “I’d rather do a professional voiceover.”

[present Grimur] But that’s it. We configured our multi-image layout, we created a trigger based on scroll position, we built out an animation that shifts focus based on the scroll, and I narrowly avoided a lawsuit by repeatedly mentioning Paramount Plus. Stream thousands of episodes, live sports and exclusive originals – all in one place: Paramount Plus...

[voiceover] Except, it didn’t matter at all. Because Raiders is on Prime Video, and I’m now paying more for streaming services than I used to pay for cable.