Design
Animations
What each setting in Vellora's Animations group does, how the theme loads its motion, and how it respects reduced motion.
Vellora uses calm, short animations to guide the eye: sections rise into view as shoppers scroll, drawers slide in and out, and the cart responds when something is added. You can turn each effect off under Theme settings → Animations.
The Animations settings
| Setting | Default | What it controls |
|---|---|---|
| Reveal sections on scroll | On | Sections fade and rise into view as they scroll onto the screen. |
| Animate drawers, pop-ups and cart updates | On | Drawers and pop-ups slide in and out, their content follows in a short stagger, and the cart reacts to changes. |
| Zoom images on hover | On | Images in cards zoom in slightly when the pointer is over them. |
All three presets keep every animation on.
Reveal sections on scroll
When this is on, content below the first screen starts hidden and rises into place as it scrolls into view:
- Headings, text, buttons and images fade in and move up by a short distance.
- Items in grids, such as product cards, collection tiles, blog posts, multicolumn columns, promotion cards and testimonials, appear one after another in a quick stagger.
- Once the animation library has loaded, the image in Image with text also eases from a slight zoom to its normal size.
- When shoppers filter a collection or press Load more, the new products stagger in the same way.
A few things are never hidden:
- Anything visible when the page loads. The first screen is always shown straight away, so there is no flash of empty space and no delay for your hero.
- Everything, when JavaScript is off. Only the theme's script hides content, so without it the page shows normally.
- Everything inside the theme editor. Reveals are paused there so you can see and select every section while you edit.
Header, footer, hero sections such as Hero collage and Split hero, and template sections such as the product page are not revealed. Most other sections are.
Animate drawers, pop-ups and cart updates
When this is on:
- Drawers and pop-ups slide or fade in, and slide back out when closed, whether shoppers press the close button, press Escape or click outside. This covers the menu drawer, the cart drawer, search, quick view, the email pop-up and product pop-ups such as a size guide.
- Their content follows in a short stagger: menu items, cart lines and the cart summary, and the product details in quick view.
- The cart count in the header gives a small bounce when the number of items changes.
- New cart lines slide in when a product is added while the cart drawer is open, for example from the recommendations in the cart.
When this is off, drawers and pop-ups still open with a short slide or fade so shoppers can see where they came from, but they close instantly and nothing else moves.
Zoom images on hover
When this is on, images zoom in by 4% over a little under a second when the pointer rests on:
- Product cards
- Collection tiles
- Blog post cards
- Promotion cards
Zoom only runs on devices with a mouse or trackpad. Touch screens never trigger it.
Reduced motion
Many people turn on Reduce motion in their device settings because movement on screen makes them feel unwell or distracts them. Vellora respects that setting for every visitor who has it on, whatever you choose in the theme editor:
- Scroll reveals, drawer and pop-up transitions and cart animations don't run. Content and panels simply appear.
- CSS transitions and animations, including hover zoom, are cut to an instant change.
- The slideshow and the announcement bar don't rotate on their own. Shoppers can still use the arrows.
- Scrolling text stays still.
- Videos in Shoppable video stay paused until shoppers play them.
- Jumps between slides and gallery images happen instantly instead of scrolling smoothly.
You don't need to do anything to turn this on.
Other moving parts
A few sections move because of their own settings, not the Animations group:
- Slideshow: Change slides automatically is off by default. When on, the slideshow shows a pause button, and it stops rotating when keyboard focus moves into it.
- Announcement bar: Rotate announcements automatically is on by default. When there is more than one announcement, the bar pauses while the pointer or keyboard focus is on it, and shows a pause button.
- Scrolling text: scrolls continuously at the speed you set and always has a pause button.
- Shoppable video: videos play muted and loop while they're on screen.
How the theme loads its motion
Animations are built to stay off the critical path, so they don't slow down the first view of your store:
- The motion script,
motion.js, is about 10 KB. It loads withdefer, after the page is parsed, and only when Reveal sections on scroll or Animate drawers, pop-ups and cart updates is on. Turn both off and it isn't loaded at all. - The smoother transitions use GSAP, a widely used animation library. The theme fetches it only after the page has finished loading and the visitor first scrolls, taps, moves the pointer or presses a key. Speed tests that don't interact with the page never load it.
- Until GSAP arrives, or if it can't load, CSS covers the main effects: sections still reveal on scroll, and drawers and pop-ups still slide in. The exit animations, staggers and cart bounce wait for GSAP.
- Only position, scale and opacity are animated. These are the cheapest properties for a browser to change, so animations don't shift the layout or cause jank.