Intro Animations
Intro Animations add a brief reveal to sections of your page as they come into view — the kind of subtle movement that makes a static layout feel alive without distracting from the content. They're a global, opt-in setting in Pixelgrade LT: turn them on once and they apply across your whole site.
What Intro Animations do
Intro Animations are viewport-triggered reveals: as a visitor scrolls and a section enters the viewport, it fades and eases into place. The goal is to give long posts, pages, and project layouts a sense of pacing — so the eye lands on one idea at a time instead of the whole page arriving at once.
Each section animates once per page view. Scrolling back up does not replay the reveal, and content that is already in the initial viewport animates in on first paint rather than appearing pre-rendered.
Before you start
Intro Animations are part of the Motion features that come with Pixelgrade Plus. The on/off control described below appears in Style Manager whether or not you have Pixelgrade Plus, but the actual movement plays on the front end only when Pixelgrade Plus is active on your site. If you turn the animations on and don't see anything move, that almost always means the Motion runtime isn't active yet — see If you don't see the animations at the end.
You connect or license Pixelgrade Plus from Appearance → Pixelgrade Design → Account (the Account tab carries a small PLUS badge when Pixelgrade Plus is installed).
Turning them on
Intro Animations are off by default. You turn them on in Style Manager, the design system for your Pixelgrade LT site. Style Manager lives inside the Site Editor.
- In the WordPress admin, go to Appearance → Pixelgrade Design.
- Open the Design System tab and click Open Style Manager. This opens the Site Editor with the Style Manager panel on the side.
- In the Style Manager panel, open the Motion section.
- Switch the Intro Animations toggle on. (Motion also has a separate Page Transitions toggle — that's a different effect; leave it as you prefer.)
- Click Save in the top-right of the Site Editor to apply your change.
What the reveal looks like
Intro Animations are a single on/off setting — there's nothing else to configure. When they're on, sections of your page fade and ease into place as they scroll into view. The character of the reveal is part of your Pixelgrade LT site's design and is tuned to match its overall feel, so you don't pick a style or a speed yourself.
Where the animations apply
Intro Animations apply to the major content blocks on posts, pages, and projects — the sections a reader actually scrolls through. They do not apply to the site header, footer, or the Site Frame, so your navigation and outer shell stay immediately usable on every page.
When sections enter the viewport as a group, their reveals are lightly staggered so the sequence reads clearly instead of all at once. This matters most on card grids and multi-column sections.
Accessibility and reduced motion
Intro Animations respect the operating system's Reduce motion preference. When a visitor has reduced motion enabled in their OS or browser, sections appear immediately in their final state — no staged hiding, no entrance animation, no delay before the content is readable.
You do not need to configure anything for this to work. Pixelgrade LT detects the preference at runtime and adapts the page for that visitor only.
When to use Intro Animations
Intro Animations work best when a page has distinct sections that benefit from pacing — long-form posts, project case studies, landing pages, and portfolio layouts. On short, utilitarian pages like contact forms or simple landing pages, the effect is less noticeable and can be left off.
Because it's a single global setting, the simplest approach is to turn it on, look at a few of your key pages, and leave it on if you like the result. There's nothing to fine-tune.
If you don't see the animations
If you turned Intro Animations on but pages don't animate, check these in order:
- Pixelgrade Plus isn't active or licensed. The Motion runtime that plays these animations comes with Pixelgrade Plus. The on/off control still shows in Style Manager without it, but nothing will move on the front end. Open Appearance → Pixelgrade Design → Account to connect or activate Pixelgrade Plus. (See Before you start.)
- Your device has Reduce motion turned on. As described above, Pixelgrade LT intentionally skips entrance animations for visitors who ask their system to reduce motion. Check your operating system's accessibility settings if you want to preview the animations yourself.
- You didn't save. Make sure you clicked Save in the Site Editor after toggling Intro Animations on.
Still stuck? Open Appearance → Pixelgrade Design → Help to search the documentation or reach support.