Let’s be honest — people love to say Showit websites are boring. But that’s only true if you don’t know how to use the tools already built into the platform.

In this tutorial, I’m walking you through five simple, no-code animations and effects you can use to instantly make your Showit website more engaging, interactive, and high-end — all using built-in features.

Let’s get into it.

---

1. Sticky Text Scroll Effect

This effect allows text to stay fixed on the screen while images scroll over or behind it. It’s a fast setup (under 5 minutes) and works beautifully for bold statements, calls to action, or storytelling sections.

How to Create It

1. Add a blank canvas
2. Add your text
   • This can be anything: a headline, brand statement, or CTA
3. Add a second canvas below
   • Set the canvas background to Transparent
   • Extend the canvas height slightly
4. Add images
   • Any image type works (PNG optional, but adds a nice layered look)
5. Enable sticky behavior
   • Select the top canvas
   • Set it to Top on Scroll

When you preview the page, your text stays in place while the images scroll and layer over it — instantly adding depth and motion.

---

2. Scrolling Marquee Text

A scrolling marquee is a subtle but powerful way to add movement to your site without overwhelming the design.

How to Create It

1. Add a rectangle
   • This can act as a background or outline
   • Optional: add a border for emphasis
2. Add text
   • Type out your phrase
   • Copy and paste it multiple times so it spans the full width of the screen
   • Optional: add emojis to break up the text
3. Set text behavior
   • Text styles → Overflow → Single Line
   • Stretch text across the full screen width
4. Apply animation
   • Animation type: Slide
   • Direction: Left or Right
   • Increase duration (start around 100 and adjust)

Pro Tip

Duplicate the marquee and reverse the animation direction to create stacked marquees moving in opposite directions.

---

3. Stacking Canvas (Full Screen)

This effect is perfect for:

• Services
• FAQs
• Processes
• Step-by-step content

Each canvas “sticks” as you scroll, stacking on top of the previous one.

How to Create It

1. Add a canvas
2. Add a full-width rectangle
   • Position it at the top
   • This acts as the canvas background
3. Add your content
   • Headline at the top
   • Body text, images, buttons inside
4. Duplicate the canvas
   • Change text and background color
5. Adjust canvas offset
   • Select the canvas
   • Adjust the offset until the canvases stack cleanly

Repeat this process for as many canvases as you want. You may need to tweak the offset values slightly depending on content size.

---

4. Stacking Canvas (Small / Condensed Version)

This is a more compact version of the stacking canvas and works great for:

• Modules
• FAQs
• Highlights
• Short processes

How to Create It

1. Design a small box or shape
2. Duplicate it
3. Set the canvas background to transparent
   • Do not add any additional background
4. Set both canvases to Top on Scroll
5. Preview and adjust
   • Add more canvases as needed
   • Adjust offsets if you want each box to stop before stacking

This gives you the same layered effect without taking over the full screen.

---

5. Image Hover Effects

A. Image Swap on Hover

This is a simple but often overlooked interaction that works great for galleries and products.

How to Create It

1. Add an image
2. Duplicate it and place it directly on top
3. Swap the top image
4. Go to Hover → Custom
5. Set opacity to 0

On hover, the image beneath is revealed.

---

B. Text Reveal on Hover

This uses the same process, but instead of a second image:

• Place text behind the top image
• Lower the hover opacity

When users hover, the text appears.

---

C. Image Reveal on Hover (Advanced, No Code)

This effect reveals floating images when hovering over text — often done with code, but this is a no-code workaround.

How It Works (Simplified)

1. Design your text layout in Showit
2. Take a screenshot of the canvas
3. Open the screenshot in Canva
4. Add images where you want them to appear
5. Export as a transparent PNG
6. Upload back into Showit
7. Set:
   • Effects → Opacity: 0
   • Hover → Custom → Opacity: 100

Important Notes

• The image must have a click action
• You can’t apply hover effects to text underneath
• Repeat the process for each image

The result is a high-end hover reveal effect without touching code.

---

Final Thoughts

Showit already gives you everything you need to create an interactive, modern website — you just have to know where to look.

With these five techniques, you can:

• Add motion without clutter
• Improve user engagement
• Make your site feel custom-built

If you do want to take things further, there are code add-ons available — but these effects alone can dramatically elevate your site.