Uploaded March 2026 | Updated September 2026, 1 week ago

---

Keep site visitors engaged by turning loading time into a branded experience with a custom preloader that feels modern and intentional.

In this Studio Byte episode, you'll learn how to stack a series of vertical and horizontal images and time quick Entrance animations so they fade in one by one. Then, add a short code snippet using Wix Animations to slide the preloader up and off‑screen once the page has loaded, revealing your homepage content beneath.

The result is a custom preloader that gives site visitors a cohesive, more cinematic first impression.

Here's the code you need:

import { timeline } from "wix-animations-frontend";
const explore = timeline().add($w('#box2'), {
duration: 500,
easing: "easeInQuad",
y: -900,
delay: 1600
})

$w.onReady(function () {
explore.play()
})

—

Learn more about Wix Studio:
wix.com/studio
Get started with our Essentials course:
wix.to/gT8VY7c
Join the Wix Studio Community:
forum.wixstudio.com

Follow us on social media:
➔ Instagram: instagram.com/wixstudio
➔ X: twitter.com/wixstudio
➔ TikTok: tiktok.com/@wixstudio
➔ Facebook: facebook.com/WixStudio
➔ Discord: discord.com/invite/wixstudio

About Wix Studio:
Wix Studio is the website building platform for professional designers, developers, and marketers. With high-end design capabilities, streamlined workflows and robust business tools, it empowers freelancers and agencies to build, manage and scale exceptional websites with maximum efficiency.

Subscribe to our channel:
➔ youtube.com/@WixStudio?sub_confirmation=1