Animations and motion
Treble's motion is set in one place: Theme settings > Animations. Choose how sections enter, how headings reveal, whether the page scrolls smoothly, and the small interactions that make the store feel alive. Visitors who prefer reduced motion always see a static page.
How to set it up
Step 1: Set the animations
- Open Theme settings > Animations.
- Turn Enable animations (1) on or off, and pick the Section entrance (2) and Heading reveal (3).
- Choose smooth scrolling, page transitions, product media that follows into the product page, and loading pages on hover.
Step 2: Interaction and loading
- Under Interaction, show cursor labels, reveal the footer on scroll, the page scroll progress bar and the back to top button.
- Under Loading, show the loading bar and the image and button loading styles.
Settings reference
Animations
| Enable animations | Visitors who prefer reduced motion always see a static page. |
|---|---|
| Section entrance | Options: Fade up, Fade, Scale, Blur, None. |
| Heading reveal | Options: Word by word, Line by line, None. |
| Subheading reveal | For the small text above headings. Decode scrambles the letters into place. Options: Decode, Word by word, Line by line, Fade up with the section, None. |
| Also reveal section descriptions | Uses word by word for Decode. Line by line suits longer text. |
| Duration | Slider. |
| Stagger | Slider. |
| Parallax media | Turns this on or off. |
| Drawer and menu speed | How quickly the cart, search, menus and other panels open and close. Options: Gentle, Standard. |
| Smooth scrolling | Desktop with mouse only. |
| Page transitions | Cross-fade between pages in supported browsers. |
| Product media follows into the product page | A product card's image grows into the product page's gallery, and back to its card. Chrome, Edge and Safari 18.2 or later; other browsers cross-fade. |
| Load pages on hover | The next page starts loading while the pointer rests on a link, so it opens almost at once. Chrome and Edge. |
| Interaction | |
| Show cursor labels | A small label follows the mouse over carousels, product images and videos, for example Drag or View. |
| Reveal footer on scroll | The footer slides out from behind the page as you reach the end. |
| Reveal on mobile too | Turns this on or off. |
| Home page only | Turns this on or off. |
| Show page scroll progress bar | Turns this on or off. |
| Show back to top button | Appears after scrolling down. Its ring fills as the page scrolls. |
| Loading | |
| Show loading bar | A thin line runs along the top of the window while pages, cart updates, filters, search and quick view load. |
| Image loading | Shown on image frames until their image arrives. Options: None, Line, Shimmer. |
| Button loading | Options: Spinner, Line. |
Overlays
| Blur the page | Turns this on or off. |
|---|---|
| Blur | Slider. |
| Darken | Slider. |
How it works
- Smooth scrolling only applies on desktop with a mouse.
- Page transitions cross-fade between pages in supported browsers (Chrome, Edge, Safari).
- Animations pause off screen to keep scrolling smooth.