How to Create a Stacking Canvases Effect in Showit

The stacking canvases effect is one of my favorite ways to add movement and visual interest to a Showit website — without relying on animations or custom code. You’ve probably seen it used on services pages, portfolios, or feature sections where content appears to layer or “float” as you scroll.

In this Showit website design tutorial, I’ll walk you through two different ways to create a stacking canvases effect in Showit, step by step:

1. A Full Cover stacking effect, where each canvas fully covers the previous one
2. A Floating stacking effect, where only part of the content changes while the background stays consistent

You’ll also be able to download the free Showit template I’m using in this tutorial so you can follow along or reuse the setup in your own designs.

🎥 Watch the Video Tutorial

Prefer watching instead of reading? The full video walkthrough is embedded above.

Free Showit Template Download

Before we dive in, make sure to grab the free Showit template that goes along with this tutorial. It’s the exact demo layout I’m using in the video, already set up with the correct canvas settings so you can easily study or customize it.

Option 1: Full Cover Stacking Canvases Effect

This version creates a bold, layered look where each canvas fully covers the one before it as you scroll.

Step 1: Create Your First Canvas

• Add your first canvas and design it with the content you want
• You don’t need to set it to window height, but make it tall enough to fill most of the screen
  • Example height: ~800–820px
• Set:
  • Stacking Order: 1
  • Sticky on Scroll: Top

Step 2: Duplicate the Canvas

• Duplicate the first canvas instead of creating a new one from scratch
• Keep the same height so it fully covers the canvas below
• Update the design and content as needed
• Set:
  • Stacking Order: 2
  • Sticky on Scroll: Top

Step 3: Repeat for Additional Canvases

• Duplicate again for a third stacked canvas
• Update the design
• Set:
  • Stacking Order: 3
  • Sticky on Scroll: Top

As long as each canvas:

• Has a higher stacking order than the previous one
• Is sticky to the top on scroll

…the stacking effect will work smoothly.

Step 4: End the Stacking Section Properly

Once your stacked section is finished:

• Any canvas after the stacking effect should:
  • NOT be sticky
  • Have a stacking order higher than the stacked canvases
    • Example: 4 or higher

This ensures the stacked canvases are fully covered and don’t reappear later on the page.

Option 2: Floating Stacking Canvases Effect

This version creates a more subtle effect where content appears to float while the background stays the same.

Step 1: Design the First Canvas

• Decide on a background you want for the entire section
• Add any text or elements that won’t change between canvases
• Set:
  • Stacking Order: 1
  • Sticky on Scroll: Top
  • Canvas Height: Window Height

Step 2: Duplicate and Update Design

For the second canvas:

• Duplicate the first canvas
• Remove the background (set it to transparent)
• Remove any elements that don’t need to repeat (like titles)
• Keep only the elements that should change (for example, a content box)

⚠️ Important: Make sure the changing element is in the exact same position as it was on the previous canvas so it seamlessly covers it.

Step 3: Repeat as Needed

• Duplicate the transparent canvas for additional sections
• Update only the changing content
• These canvases can all share the same stacking order — this effect still works smoothly

Step 4: End the Floating Section

Just like the full cover version:

• Any canvases after the floating section should:
  • Not be sticky
  • Have a higher stacking order so they cover the effect cleanly

Mobile Considerations

Full Cover Effect on Mobile

• This effect can be tricky on mobile, especially if your content exceeds window height
• I often recommend disabling the stacking effect on mobile and letting sections scroll normally

Floating Effect on Mobile

• The floating version works much better on mobile
• Because each canvas is set to window height, it fits more naturally on smaller screens
• The setup is the same as desktop — just duplicate and update the changing element

Want Even More Stacking Canvas Options?

If you like this effect and plan to use it often, I also offer a premium Showit stacking canvases pack that includes pre-built layouts, variations, and time-saving setups you can drop straight into your designs.

It’s perfect if you want the stacking canvases effect without rebuilding it from scratch every time.

👉 Check out the premium Showit stacking canvases pack

Final Thoughts

The stacking canvases effect is a powerful way to add movement and depth to your Showit designs — and once you understand stacking order and sticky settings, it’s surprisingly simple to recreate.

If you found this Showit website design tutorial helpful:

• Be sure to download the free Showit template
• Subscribe to the channel
• Share this tutorial with a designer friend who would love this effect too

And if you want more ideas like this, I also have a tutorial on creative Showit scroll effects, including image hover effects, sticky sidebars, and color-changing text.

Happy designing!