Spice Up Your Sales Promotions with a Video Scroll Animation [Tutorial]

When running a sales promotion on your ecommerce site, you want it to be the first thing shoppers see.

There are lots of fun ways to announce a sales promotion to ecommerce shoppers when they enter a website. One way to do it is with an interactive video scroll animation.

Video scroll motion effects aren’t commonly used in web design — not because they don’t look good or aren’t easy to use, but because, without the right tools, they can be difficult to create.

Slider Revolution has both an AddOn and a Black Friday Scroll Video template that will simplify this process for you. All you need to do is choose the right video, personalize the content in the template, and then add it to your home page. The following tutorial will show you how: 

Table of Contents:

How to Create a Video Scroll Animation for Your Home Page

Sales promotion banners tend to follow the same formula. You announce the name of the sales event, summarize the offers, and then invite customers to start shopping as the event won’t last long.

But if you want shoppers to react to more than just the discounts you’re offering, why not impress them with a scroll-triggered design like this?

Note: The vertical lines you see in the template above look exaggerated because of our screen recorder. The lined overlay effect is more subtle when someone views the template from their browser.

While this template is designed for Black Friday, it can easily be repurposed for any kind of holiday or sales promotion. For the tutorial below, we’re going to show you how to create a video scroll animation for a semi-annual sales event:

Need a quick Slider Revolution refresher? Start here:

Step 1: Upload a new scroll video

The first thing you’ll see when you step inside the Black Friday Scroll Video template is the Global Color Skin modal:

Dismiss it for now. It’ll be much easier to set global colors and customize your fonts once you have your background in place.

Now, the video scroll animation that sits in the background isn’t like the typical Slider Revolution video background. A video background plays smoothly at the speed you set for it. A video scroll animation, however, is created by slicing a video up into frames and then playing those frames in sync with the user’s scrolling.

To add a new video to this promotional banner, go to “Module Options” and “Scroll Video”. Scroll down and do the following:

  • Click “Delete Frames, get new Video”.
  • Scroll up and click on “Media Library” to upload your new video file or “Object Library” to use one from Slider Revolution.
  • Configure the start and end times, video frame, quality, and size settings (if needed).
  • Scroll down and select “Generate Frames”.

Slider Revolution will take care of splicing the video frames and turning it into a scroll-synced animation:

In the example above, we’ve left all the default settings in place for our 12-second video. The result is a video that feels pretty choppy when it loads. That’s because only 13 frames have been generated at a rate of 1 frame per second (1fps).

Videos, in general, tend to load at about 25 frames per second. However, if we were to generate thumbnails using this setting, we’d end up with over 300 frames that each visitor’s browser would have to load before they could interact with the module.

To cut down on the choppiness of the video scroll animation without compromising your loading speeds, set your “Frames/Sec” to 10 fps.

Learn more:

Step 2: Edit the module overlay

There’s a module overlay that gives our video a somewhat grainy look. Here’s how our new video looks with the template’s overlay applied to it:

Note: While our screen recorder has exaggerated the effect of the lines, the less-pronounced result we see on our end is still not the ideal look for this kind of background.

On top of the dark meteoric video in the template, a black vertical overlay looks good. It adds just a tiny bit of distortion to the graphic. On top of our brightly colored video, though, it’s too much.

To edit the overlay, go to “Module Options”, “Layout”, and scroll down to “Overlay”. To keep an overlay in place, but minimize its heaviness, do the following:

Change the overlay to “Dotted Small” (or any of the other “small” overlay settings) so it won’t be as pronounced and the second color to grey so it won’t drown out the vibrant colors from the background.

Pro tip: While you can use other colors besides blacks and greys for your overlay, be mindful of what they do to the colors in your background as well as the impact they have on shoppers’ eyes. The point of this overlay is to add some texture to the unique scrolling effect, not to overpower visitors with color.

Here’s what the new module overlay looks like with a subtler overlay:

The dots add a bit of color to the module while maintaining the digitized look of the video scroll animation.

In the end, we decided to remove the overlay completely from the final design since we really want our product’s colors to pop. If your background contains product photos, we’d recommend doing the same. However, if you’re going to use an abstract background like the one in the template, the overlay will add a nice techy touch to it.

Learn more:

Step 3: Set the skin colors

The background isn’t the only element that transforms when the user scrolls. The color of the main headlines does as well.

While you could go through and make adjustments to each text layer’s color style and animated color style, there’s an easier way to accomplish this.

The template has been set up to pull in colors from the global “Skin” colors (the same ones you saw when you entered the template). Slider Revolution then takes care of the rest, including creating the colorful text gradient that appears first thing in the module.

First things first, you need to pick out two colors that’ll stand out nicely against your video background. Whether or not you use a semi-dark overlay on top of the video, you’ll want to pick bright colors to go on top of it. Just make sure they contrast well with whatever the primary colors are in the video.

For example, the girl in our video is wearing a golden yellow shirt. We can use the Canva color wheel to see what kinds of bright colors provide a harmonious contrast with gold (HEX #FFD700):

We can also use Canva’s color palette presets to find creative color combinations that use gold:

Both of these resources suggest that a bright blue and a hot pink color would work nicely with gold.

To add your new global colors to the Slider Revolution module, go to “Module Options” and “Skin”. The color modal will appear:

Note: The text gradient that appears in your video scroll background is created by Slider Revolution. When you select one color for the Anim To animation state and then a different color for the Anim From state, Slider Revolution automatically connects the two colors for you.

You may need to play around with which color you assign to Color 1 and Color 2:

  • Color 1 is going to appear as the end of the gradient in the first text sequence. It will also be the first color that the second text sequence shows up as.
  • Color 2 is going to appear as the beginning of the gradient in the first text sequence. It will also be the final color that the second text sequence shows up as.

Use the Preview button to confirm that you like the colors you’ve chosen and that they stand out nicely against the background. You may need to pick colors that are closer to each other on the color wheel if you don’t like the in-between color that’s generated in the gradient. 

Learn more:

Step 4: Edit the first title sequence

Rather than display the entire promotional message at once, this template shows two title sequences as the visitor scrolls.

To edit the first one, locate the grouped Title1 in the timeline at the bottom. Mini-Title is the all-white text. Title is the big colorful headline.

To edit what each says, select them one at a time. Then, go to “Layer Options” and “Content”. Replace the existing text with your own:

While you have full control over how your text looks and behaves in Slider Revolution, the template’s already done a lot of the work to create an eye-catching transition sequence. To preserve the effects of the template, keep your edits to a minimum.

To customize the text’s appearance, use the “Style”, “Size & Pos”, and “Adv Style” settings: 

In addition to changing the font for both layers, we also had to update the Mini-Title since the smaller white font didn’t stand out as well against the lighter background. You might also need to change the color of this line to enhance the contrast with the background. Just make sure it doesn’t steal attention away from the Title header.

Learn more:

Step 5: Edit the second title sequence

Repeat the process you went through in Step 4 for the second title sequence. That means applying the same changes you made to the Title layer to Title-2 and the same changes you made to Mini-Title to Coupon-Text.

One thing to note before you do this is how to access these text layers. While you can see them in the timeline, you can’t see them in the canvas nor will you be able to select them for editing.

To access Title-2 and Coupon-Text, hover over the layers in the timeline and click the crossed-out eyeball icon next to them:

You can see now why these layers are hidden from the canvas. It would be difficult to visualize what you’re working on if layers that appear at different times are all stacked one on top of the other.

Once they’re available for editing, go in and make your changes:

You can re-hide the layers from the canvas when you’re done if you’d like.

Learn more:

Step 6: Customize the Lottie

The last component on this page to edit is the Lottie icon that visually tells visitors that they should keep scrolling. You can edit this element by clicking on the Scroll-Down-Lottie layer in the timeline or canvas. Then, go to “Layer Options” and “Lottie”.

If you’d like to select a different Lottie, or compare your options, click on “Select from Library”:

Since this isn’t a decorative element and it actually serves a practical function, we’d suggest leaving the Lottie and its settings as they are.

The only thing you might want or need to do is change the color if the white shape doesn’t stand out well against the background. You can do that under “Grouped Colors”.

Learn more:

Make Sure Shoppers Never Miss a Sales Promotion Again

Ready to wow your shoppers with amazing deals and an equally amazing sales promotion banner? The Black Friday Scroll Video template might look like a complicated one to reproduce or edit at first, but as you’ve seen here today, the process is pretty straightforward. All you have to do now is find the perfect video to slice up and animate.

Spice Up Your Sales Promotions with a Video Scroll Animation [Tutorial]

FREE: Your Go-To Guide For Creating
Awe-Inspiring Websites

Get a complete grip on all aspects of web designing to build high-converting and creativity-oozing websites. Access our list of high-quality articles and elevate your skills.

The Author

Kezz Bracey

Learn everything you can. Teach everything you know.

For further information or clarification on any topic discussed in this blog's posts, feel free to leave a comment on the post or contact me at [email protected].

Liked this Post?
Please Share it!

Leave a Reply

Your email address will not be published. Required fields are marked *