If we hit play on a video, what happens? Exactly what we’d expect, it starts with
the first frame, plays all the frames in order, same old story. But we’ll link this example up a little
differently, we’ll tie this video, this sequence of images to the scroll position
on a page. And we’ll do it like this: we’ll set up
our image sequence, we’ll configure it in After Effects, we’ll export using the Bodymovin
extension, we’ll import it into Webflow and set up the layout, we’ll set up a scroll-based
trigger, and we’ll link that trigger to the image sequence. It sounds like a lot, but we’ll move fairly
quickly and cover each and every step involved. So, the first part. Our goal is to have an image sequence, one
image per frame, in order. For this example, we’ll start with a single
video we want to import. This video was exported from, it was rendered
in Cinema 4D, but for this to work as an image sequence we have to first make it an image
sequence. So we’ll fire up Adobe Media Encoder, and
you can drag most common video types right into the queue here. And there are two things we’re looking for,
well three if you care about where the images end up. The first is the format. We want the format to be JPG. Now, can you do an image sequence using PNG
files? Maybe you want transparency support, you can,
but in this case we’re using a JPG sequence. The preset, we said we cared about before,
there’s only one preset in the dropdown. But if you’re looking to make specific changes
you can click on the preset name and access more advanced options. Finally, we want to make sure the output destination
and file name is set. And when we’re ready to start our queue,
we’ll press the tiny play button. And just like that our single video file has
been turned into an image sequence. If we open that up, we have the file name
we chose and appended to each JPG is the frame number. This is our image sequence. That’s the first part. The second part is putting this in After Effects. Let’s drag our entire image sequence into
our project bin. Traditionally we’d create a new composition,
but without doing that let’s drag all our selected images right into the layers area
and let go of the mouse. And this is the important part, in addition
to all the other important parts, we want a single composition. Since the dimensions on each image are the
same we’ll leave the next part as is, but we want to make sure each still lasts one
frame. Each image, each still, is valued at one frame. And, finally, we want to sequence our layers. We want them loading in order without any
overlap, no overlap. When we hit okay, our image sequence is loaded
right in After Effects into its own composition. Each layer, each frame, represents one image
in our image sequence. That’s step two. Step three, let’s export this using Bodymovin. Window, Extensions, Bodymovin. Let’s make sure this composition is selected
for render, and this is really important. We want to go into our settings and take a
look under Assets. Two things here. We want to enable compression. How much compression? You can test this out to see what looks right,
but our goal is to keep the file size down while maintaining good quality. So for this, let’s try it out at 60. And the second thing here, let’s include
the images inside the JSON, the file we’re going to export. Save changes, let’s set our destination
folder, where we want to export the JSON file, and once we’ve gotten everything configured
let’s render. Now, this part can take some time, so we reached
out to the creators of Jeopardy to see if we can use their theme song while we wait
for the render to finish. We have yet to hear back. Once the render is finished, let’s import
our file into Webflow from the Assets panel, we’ll upload our file. We’re just selecting the JSON we exported
from After Effects. And, once that’s been brought in, we can
drop it right onto the canvas. And, just like any other HTML element on the
planet, we can set dimensions. Let’s set a width constraint here, we can
simply type in a width, and hit enter. And that’s step four. For the last two we’re going to use Interactions. To set a trigger, let’s go over to our Interactions
and add a page trigger. We want the animation to be triggered as we’re
scrolling through the page, so we’ll select that option. That’s step five. For the last part, let’s bring it to life. On scroll, we want to play a scroll animation. We’re creating a new animation here. And 0 percent scroll when we’re at the top
of the page, we want our Lottie animation to be at the beginning. We’re simply selecting the Lottie animation
and adding an action, a keyframe, at 0 percent. And at 100 percent when we’re at the bottom
of the page we want the animation to be at the end. Now, image sequences can be a bit tricky since
they’re located at exact frames. So you might have to adjust, you can play
around with the value here until its just right. Now, if we’re done with that, we can go
to preview mode, we can try and scroll and nothing. Why is that? No idea. Except here’s why. In order for the animation to animate as the
page scrolls, the page needs to be able to scroll. Right now, there’s nothing else on the page. So there’s no ability to scroll. So, let’s go out of preview mode, and set
a height on the body element of 200 VH. This means 200 percent of the viewport height. If we do that, and we preview, now we can
start to see something happening. Our animation is animating based on our scroll
position. Let’s leave preview mode because we should
figure this out. What if we set our animation to fixed? What if we set the Lottie animation’s position
to a fixed position? If we do that, and we go back to preview mode,
we can see the Lottie animation animates based on scroll, and it stays fixed in the viewport
exactly where we told it to go. Now, the animation behaves just like any other
HTML element. So, we’ve included an example project that
uses this rose animation inside the context of a real layout. So check that out on Webflow university if
you haven’t already. But, that’s it. We prepped our image sequence, imported and
configured it in After Effects, exported the JSON, wrote to the producers of Jeopardy,
brought the JSON into Webflow, set up a trigger, set up the animation, and summarized everything
we learned right before Grimur cut to black before this sentence even fin-
