In this tutorial, you’ll learn several eye-catching animations and interactive effects you can add to your Showit website — whether it’s for your own brand or a client project. Some of these effects use Showit’s built-in tools, while others use simple copy-and-paste code that requires no prior coding experience.

All code referenced can be pasted directly into Showit and lightly customized.

---

Custom Cursor (With Code)

A custom cursor is a subtle but powerful way to add personality and branding to your site.

How to Add a Custom Cursor

1. Open the page where you want the cursor applied.
2. Click the page name (top section).
3. Open Advanced Settings → Custom CSS.
4. Paste in the provided cursor code.

Create Your Cursor Image

• Size: 32px × 32px
• Format: PNG
• Design tools: Canva, Photoshop, or similar

Upload & Link the Image

1. Upload the cursor image to Showit.
2. Click the link icon to copy the image URL.
3. Paste the URL into the CSS where indicated.
4. Save and preview your site.

⚠️ The cursor won’t show inside the Showit editor — only in Preview or live mode.

---

Scrolling Progress Bar (With Code)

This adds a slim progress bar that shows visitors how far down the page they’ve scrolled.

Setup Steps

1. Add a blank canvas to your page.
2. Set the canvas background to transparent.
3. Add an Embed Code element.
4. Paste in the provided progress bar code.

Canvas Settings

• Resize the canvas height to 1px
• Drag it to the bottom of the page
• Set the canvas to Sticky → Bottom

Customize the Color

• Open the embed code
• Replace the hex color with your brand color
• Save and preview

This creates a clean, unobtrusive progress indicator that feels modern and intentional.

---

Infinite Scrolling Gallery / Logo Marquee (With Code)

This effect creates a smooth, looping gallery — perfect for:

• Brand logos
• Portfolio images
• Featured work
• Client highlights

Add the Gallery

1. Add an Embed Code element.
2. Paste in the scrolling gallery code.
3. Resize the embed box to your desired height.

Add Images

1. Upload images to your Showit media library.
2. Copy each image URL.
3. Paste URLs into the code where indicated.
4. Duplicate image lines as needed for seamless looping.

Customize the Gallery

You can adjust:

• Image size (desktop & mobile separately)
• Scroll speed
• Number of images
• Mobile vs desktop behavior

Lower speed values = faster scrolling.

Using Multiple Galleries on One Page

• Each gallery must have a unique class selector
• Example:
  • marquee-wrapper
  • marquee-wrapper-1
• This prevents code conflicts and allows different settings per gallery.

---

Reverse Stacking Canvases (No Code)

This is one of the most requested Showit effects and works beautifully for:

• Services
• Process steps
• Timeline-style layouts

Initial Setup

1. Start with a canvas containing a title or intro section.
2. Add a new blank canvas underneath.
3. Add a full-width shape (rounded corners work well).
4. Add your text and images inside the shape.

Enable Sticky Behavior

1. Click the canvas.
2. Set Sticky → Bottom on Scroll.
3. Adjust the offset (use negative values).

Example offsets:

• First canvas: -530
• Second canvas: -610
• Third canvas: -690

These values will vary depending on canvas height.

Important Notes

• Test and tweak offsets until canvases nest smoothly
• Mobile offsets must be set separately
• You can stack as many canvases as you’d like

---

Switching Galleries (No Code)

This effect creates two galleries that move in opposite directions when clicked.

Setup

1. Add a blank canvas.
2. Add two gallery elements.
3. Upload images to both galleries.
4. Align galleries side-by-side or stacked.

Assign Gallery Numbers

• Gallery 1 → assign as Gallery 1
• Gallery 2 → assign as Gallery 2

Add Navigation Buttons

1. Add arrows or shape buttons.
2. Assign click actions:
   • Arrow → Gallery 1 → Next
   • Same arrow → Gallery 2 → Previous
3. Reverse directions for the back arrow.

Final Step

• Set both galleries to Slide under gallery settings.
• Preview and adjust spacing as needed.
• Update mobile layouts separately.

---

Final Thoughts

These animations are designed to:

• Add motion without overwhelm
• Increase engagement
• Make your Showit site feel more premium

You don’t need to use all of them — even one or two thoughtfully placed effects can dramatically elevate your design.

---