Apple's AirPods Pro site is an excellent example of using the scroll position in the browser to control a 3D render. And this uses an image sequence. If you look at how the page is built, you
can see that each frame of the rendered video has its own JPEG (each frame is an image). In other words, as you scroll, the animation
(the video) advances. Now what we'll do in this video is kind of
the same concept (an image sequence based on our scroll position). And because AirPods take much longer to model
correctly, we'll do a really simple version of this using a phone (we'll make this in
Cinema 4D). And we'll place that phone inside a grid-based
layout. At the end, it'll respond to our scroll position
and rotate as we move down the page. We’re going to build this from scratch. From the very beginning. We’ll build it in Cinema 4D, we’ll render
it in After Effects, we’ll export it as a Lottie animation using a plugin called “Bodymovin”. [Meg] Bodymovin, the plugin. The plugin, Bodymovin. [McGuire] Mmm, it’s an extension. [Meg] It still ends in the same thing. [McGuire] Mmm, “extension” ends with an “n”, “Bodymoving” ends with a “g”. [Meg] No. [McGuire] Yes. [Meg] Bodymovin. [McGuire] Body moving. [Meg] No G. Bodymovin. [McGuire] “Extenshing”. We’ll drop that into Webflow and we’ll
make the animation respond on scroll. First part, Cinema 4D. This is not Cinema 4D. It’s After Effects. We can verify, by going to After Effects,
about After Effects, and taking a look at the title card where it says Adobe After Effects. But for now we can close out of this window
and instead go to file, new, and in After Effects, many people don’t notice this,
but we have an option to create a MAXON CINEMA 4D file right here from the file new menu. Click that, and we’re prompted to save a
file, a Cinema 4D file, so let’s do that right here. We’ll call it “Phone Rotate”, and when
we do that Cinema 4D loads right up. Once it’s loaded we can see the basic interface
for Cinema 4D. Now you’ll notice depending on your exact
view Cinema 4D will darken the viewport here. In the middle, the parts that aren’t darkened,
this is what will show up once we render in After Effects later on. The first thing we’re going to do before
we build our phone is set some of our settings, our render settings. We can do that right up here by pressing “Edit
render settings” and let’s change our size. Let’s make this 1000 pixels wide. We’ll do a height, this’ll be a simple
rotation, let’s do a height of maybe 250 pixels. We can always make changes to this at a later
time. That’s pretty good. Keep the frame rate, and everything else the
same right there. Okay. Let’s resize our viewport so that we can
more accurately work with that object we’re making. And speaking of which, this is the time in
which we’re going to build a phone. Let’s create a new primitive here. We’re going to add a cube object by pressing
right here. We can also press and hold and take a look
at all the other objects in Cinema 4D, but for now we’ll do a cube, and that’s it. This is going to be the basic structure of
our phone, and instead of making it perfectly dimensionally accurate we’re just going
to eyeball what the phone would look like on the account of this being an entirely fictional
phone. So we’re just grabbing the edges here and
resizing again eyeballing it, and there are a number of ways in Cinema 4D to rotate around
an object, to rotate around the viewport, and we’re just going to grab up here this
rotation button. Press and drag and that’ll let us see different
aspects of it. You can also use the number 3 on the keyboard. Just press and hold the number 3, then you
can click and drag anywhere in the viewport. That also lets us rotate. So you may see a switch between different
ways of doing that. Okay, let’s rotate to the side. This is going to be advertised as the world’s
thinnest smartphone so let’s make it even thinner. That looks pretty comically thin and what
we can do is turn on “Fillet”, and when we do that it rounds everything. We can use zoom right here to zoom in a little
closer so we can see what’s going on on the edges. That looks pretty good as is. Another quick way to zoom, where 3 we can
press 3 to click around and rotate, you can use the same thing with 2 to zoom. You can just click and drag anywhere in the
viewport to zoom. This is the basic structure of our phone. We’re going to add a few more items to this. So instead of creating a new cube from scratch
let’s just copy and paste, pressing Command (Control) + C, Command (Control) + V, and
we have another cube. We can’t see it because it’s taking up
the same space but if we move it this way we can see that there’s another cube in
that space. Let’s move it here to create volume, a lot
thinner this way, a lot thinner this way, so it’s almost a pill shape right now. And let’s go in, so we can go in a little
more closer to this so we can size everything appropriately, let’s change our Y size,
our height, to maybe 1.75 centimeters, and again, we’re just eyeballing this to create
volume of sorts. So let’s do the same thing, command C, command
V to duplicate that, now we have two volume buttons. We can select both of them at once, holding
down shift and clicking the second one, zoom out, and we can position these volume buttons
maybe a little bit farther over here. Maybe decrease that height to 1.5 and zoom
in right here. Submerge them a little bit more and the overall
phone shape. Let’s zoom out. That looks pretty good. Maybe they can be a little more defined. Just moving them out and where 3 is clicking
around and rotate, 2 is zoom, 1 lets us move throughout the viewport. So, these are essentially mapping, these are
keyboard shortcuts that map for move. It’s the same thing as using move up here,
zoom up here, and rotate up here. We’re using the same thing with keyboard
shortcuts. So you’ll see us demonstrate that throughout
this video, some other videos that include work inside of Cinema 4D. Zoom out, take a look at the phone overall,
maybe a little bit of a movement right here. The volume buttons might be a little large,
we could decrease the size, the X size to maybe 10 and move them maybe a little bit
closer together. We can always change this later but that looks
pretty good for now, and this is about the shot we want, and let’s create a camera. And anything that’s in a camera, whatever
we create in this camera is what is going to serve as the basis for what we export,
what ends up on the actual webpage. So with this camera, we just created it, if
we move around the viewport, we can take a look at the camera we just created. But in order to see what the camera sees we’re
going to press this target icon right here. It’s going to move us, it’s going to move
our field of view into what the camera sees. And now we’re looking at what the camera
sees. A few changes right here, let’s decrease
this, let’s remove that rotation, let’s move this towards the center, just changing
our X values, this is the position, to 0. Now we’re looking at the phone. Now if we zoom in or rotate or make any changes
while the camera element is selected that could effect the cameras position. So instead we can move out and take a look
at what the camera is looking at. We can move the camera closer, farther away,
we can also do multiple views but for now, this might be pretty close to what we’re
looking for. That’s looking good. We can also affect zoom on the camera, just
affecting the focal length of what the camera sees here. That looks pretty great. Let’s render this frame. So we’ll press render view, and that gives
us an idea what it looks like when this is rendered, this is what it would look like
on the web page if we rendered everything right now. There’s no animation, there’s no texturing,
so let’s take care of both of those right now. First thing, these two cubes right here, we
can name them, we can say “Volume 1”, we can call this one “Volume 2”, we can
call this “Phone Body”, and we can take volume 1 and volume 2 and drag them to be
children objects of phone body. Do that, now when we move phone body, if we
rotate phone body, the volume buttons rotate with it. Let’s command Z or control Z to undo right
now and let’s start animating. So just like After Effects, Cinema 4D works
based on key frames. We can animate in Cinema 4D using key frames. So that’s exactly what we’ll do. We are at 0 frames right here, we want to
add a keyframe. The phone body is selected and we want its
initial position to be over here. Let’s rotate to a wider top view of the
phone, and let’s grab that keyframe. Let’s create a keyframe and now if we drag
our playhead position and we go to the end we can create another keyframe. A little bit at the bottom of the phone like
this, and create a second keyframe. We rotate, we can see the animation works
exactly as we expect. We can also take the camera and affect its
rotation, we want it to point down at 6.5 degrees or so, maybe 6 as a nice compromise. That looks really solid. Let’s texture this. So to create a texture we’ll go to create,
new material, and we’ll drag this material right on top of the phone body. That means it’ll affect the phone body itself
and since there is not a texture on the volume buttons it’ll also affect the texture of
the volume buttons. We can make changes at anytime so let’s
select both these volume buttons and maybe submerge these a little bit more because it
might look a little weird with two pronounced protuberances on the side of the phone, like
this. Let’s submerge them a little bit more. That looks pretty good. So, texturing, we’ve applied the texture,
let’s double click that material to edit and let’s change the color to black, let’s
do that here, and we’ll play with reflectance and there’s a few options with specularity
we can adjust here. So specularity, if the width is increased,
generally that means things are going to look more matte. Looks like an almost plastic type of phone. But if we decrease that width it gets more
of a shine, like a polished metal or glass look. So we’re going to decrease that width a
lot and we’re going to increase the strength of that specularity, up that specular strength
and get a nice, pure reflection on the side. We can come back to specularity but for now
let’s close out of the material editor and add some lights so we’ll create one light
and if we render right now with this light placed right here, this is what it looks like. Nothing. To see why this is, let’s click out of our
camera view real quick and we can look at this from the side. Render, we can’t see anything because the
light is currently inside the phone, the fake phone we created and we can use the shortcut
Command + R, or control + R on PC to quickly see the rendered view. There’s absolutely nothing to show on the
screen. So if we move, if we just adjust the position
of this light, let’s go back to the camera, we can see there is now something, it’s
reflecting on the side, and when we render now we can make out the corner, the edge of
the phone. Let’s do that. Let’s create a few lights. Copying and pasting, moving the lights over
here so we can see the volume buttons. Let’s move this one back a little bit. Let’s copy and paste again or let’s just
paste again and move another light, perhaps back and to the left. If we render now we are starting to get a
little of an idea of the shape of the phone and do another light, anytime we can just
press this light button to add another light. Press this one right here, maybe move it back
a little bit so we see a little bit of an edge. Let’s render that. Raise it up a little and move it back, it
might be helpful to zoom out and go out of the camera view for this so we can really
have control over the positioning of the light. Back into the camera we can’t really see
it so let’s zoom out again. Sometimes it can help to have multiple views
here so let’s go to panel, arrangement, and let’s do 2 views stacked, so we’re
keeping this view and we can change the second one, currently it’s a top one, we can change
this view to an actual camera perspective and to do that we can go to cameras and then
perspective. To make sure we can see what the camera sees
let’s make sure our target is selected so now we’re seeing what the camera sees. By default it’s showing a wireframe, we
can just go to display and choose one of our shading options. That looks pretty good. So now with our top view up here we can move
around and adjust the position of this light, and we can click and drag to see how the phone
looks as we rotate, that light may look a little intense so we can drop its intensity. So we can still see the shine on the phone
but it’s not as piercing. So that looks okay, zoom out a little bit
more because our light is quite far up and let’s copy and paste to create yet another
one. We’ll move it over to the side. We’ll move it back a little bit, maybe up
a little more, and if we click into our second view and hit render, again that other light
might be a little intense, so let’s make sure it’s selected, decrease that intensity
a little bit, and we might even want to go into our material and widen that specularity
a little bit. So this is if it’s very wide, this is a
little less wide, maybe 20%, and decrease that specular strength maybe to 175. That looks pretty good. Let’s render and that looks solid. Now one more note about lights, it might not
be immediately obvious how thin the phone is if, when rotating, we can’t see the edges,
we get an idea based on that specular highlight based on the lighting itself but it’s a
pretty thin phone and it might help to have some kind of definition on this right side. So let’s create another light and we can
move it over here and pull back a little bit, there we go, just so we can see that edge,
maybe lower it a little bit, pull it back, so we can see that edge. Let’s drop the Y value to -20 or so. That’s looking pretty good, maybe even 25. Nope, back to 20. Render, now we’re making out that edge a
little bit, there’s another way to do this, and that is we can grab the material itself
and instead of black we can make it a very dark gray so there’s a little more detail. That might not look as good. Let’s try a much lower value like 4. That might look a little better but overall
we get the idea that the phone is a thin phone, we get the idea that it has boundaries, that
specular highlighting is helping us a lot. We can even animate that new light we just
created. If we click into our top view here we can
just click the H button to reset our viewport and what we can do is zoom out a little bit,
let’s grab that new light we just created, and let’s add a keyframe. We know we want light right around here to
be positioned right there but let’s pull back and move the starting position of that
light a little bit. Let’s pull back here. Maybe back there. Add a keyframe, and now that light is going
to move and you’re going to see that specularity, that edge kind of roll off actually right
around frame 62, and it ends, that specular highlight ends all the way at 90, right there
on the edge. So that will look pretty solid. Let’s select our lower view and render there. That looks pretty solid. Looking good. We can do this all day but for now let’s
save. We can just go to file, save. Now instead of rendering this inside of Cinema
4D let’s use After Effects to render it as a JPEG sequence. A sequence of images. And if you haven’t done this part before
we’ll cover the details but it’s a good time to note we have a free course on Webflow
University that covers all the details of using After Effects, Lottie, Webflow, so check
that out if you haven’t already. So we save our project, let’s switch over
to After Effects. Instantly, that Cinema 4D file we created
earlier, that’s in our project. So from there we can just click and drag from
composition and instantly we can see that render each frame is visible in the timeline
below. Now the view we’re seeing here is a little
bit different from what we would expect, it’s showing us a different render view from what
we’d expect. So let’s go into renderer and change that
to “Standard (Final)” and that looks a lot more like we’d expect. Let’s just rotate through and it looks really
good. Now that gray that we set earlier, it might
be a little intense, so we can switch back over to Cinema 4D, we can go back into that
material and change that into a really dark gray, 1%. All we have to do is save, go into file, save. Switch back over to After Effects and it’s
updated instantly. Let’s scroll through and see how it looks
and it looks pretty consistent throughout the entire thing. So, how do we export it as an image sequence? We’ll just go up to composition, add to
Adobe Media Encoder Queue, then there are a few things we’re looking for. First is that the type of output is JPEG,
we want to make sure it’s a JPEG Sequence, here you’ll see the only option is JPEG
Sequence, that’s fine. And the output file, let’s put that into
the same folder we used before. In fact we’ll create a new folder inside
that, inside that phone animation folder, we’ll call it Image Sequence, and we’ll
hit save. When we’re ready let’s hit the play button
to start the queue, and generally Media Encoder is going to render this pretty quickly, it’s
a pretty simple project, and while it’s rendering it’s a good time to — and it’s
done. And once we render an image sequence, let’s
set it up to export with the Bodymovin plugin. Let’s save what we have, file, save, and
we can call it “Phone Rotate”, and save the After Effects project, let’s create
a new project and once we create a new composition all we have to do is drag in that image sequence. So we have the image sequence, this is what
we outputted from Adobe Media Encoder just a few seconds ago, and we’re going to select
all of them. Command + A, or control on PC, to select each
of these frames and let’s drag them right into After Effects, into our project. That worked perfectly. Let’s drag those right into the gray area
down below. And After Effects will magically prompt us
to set this all up. So it’s a single composition we’re creating
from all these frames. We’re going to use the dimensions from any
one of them because they are all the same size, we’re going to make sure the still
duration, the duration from each still, is set to one frame. So all zeroes with a one at the end and we’re
going to sequence the layers without overlapping. When that’s set up let’s hit okay and
a composition will be created with each frame we created in Cinema 4D. Let’s just drag through and we can see that’s
our animation. A series of still JPEGs that makes up the
whole animation. And all we have to do to export that with
Bodymovin is go to window, extensions, Bodymovin. We’ll select this one for export by clicking
selected, and a few things to work on for assets. Let’s click on assets, two things. Let’s enable compression, and we’ll include
the JPEGs, the image sequence, in the JSON. Now, depending on the complexity of each of
your images and image sequence, you may want to play with your compressions so that we
get realistic file sizes on output. 80 should work on this, let’s hit save,
and we’ll choose the destination folder and the file name. Let’s call it “Phone rotate” because
we’ve called everything else phone rotate. When we’re ready, render. And, what the Bodymovin plugin will do is
take each of those images and sequence them out into a JSON file. That’ll take a few more seconds, 3, 2, 1,
render is finished. That is exporting it, let’s make our way
into Webflow. Now what we have here is a page we built from
scratch using a grid layout. Our goal is to get the Lottie animation we
just exported into this particular div block. How do we do that, let’s go over to the
assets panel, upload, and we’re just going to choose that JSON file we exported a moment
ago. Hit open, how do we get that JSON file into
the div block, we can just click and drag and place it right inside hero image block
and that’s it. If we go to preview this page the Lottie animation
plays instantaneously and if that’s what we’re looking for, if we’re looking for
an animation that plays immediately on page load that’s fine and if we do that again
it looks pretty good. But we want to take it a step further. And that leads us into the last step of the
process, setting up the interaction. We’ll go over to interactions and we’re
going to add a trigger on the page. This is an event, while the page is scrolling,
we want to animate. So on scroll we’re going to select our action
here, we’re going to create a new animation. It’s going to be a scroll animation. We’ll simply add a new one. Right here. We’ll call it “Phone rotate on scroll”
and all we need is two different actions. We need an action at 0%, let’s make sure
nothing else is selected. Let’s select our Lottie animation and set
a point at 0%, when we’re at the top of the page. At 0%, we want our Lottie animation to be
at 0%, at the start of the animation. But at 100%, this was automatically created
when we started our first one, at 100% we want it to be at the end of our Lottie animation. Now, sometimes going to the end it’ll be
interpreted as going beyond the last frame, so play with that to make sure it looks right,
99% will work well for now, and when we go into preview mode this time nothing happens. Until we scroll. Because when we scroll this time, our animation
is locked to our scroll position. And that’s it. All of this we did in 6 steps. [Sara] 5 steps. All of this we did in 5 steps. We modeled in Cinema 4D, we rendered in After
Effects, we exported a Lottie JSON file, we imported that into Webflow, and we configured
the interaction to respond on scroll. And that’s tying an animation sequence or
a video to animate as we scroll through a page.
