Knowledge Base

Effects & Settings Reference

Every setting in the Site Animator panel, what it does, and which parts of your page it affects.

Theme Presets

Presets set every element group at once: Minimal & Clean, Dynamic Bounce, Editorial and Cinematic. Pick one as a starting point, then change any group. The preset switches to Custom (Manual) as soon as you do.

Element Groups

The animator finds elements by their HTML tag, so it works on any site without setup. Each group can be set to None to leave it static.

Effects

Entrance effects

• Fade In: the element fades from transparent to visible in place. The gentlest option.
• Fade Up: fades in while moving up from slightly below its final position.
• Scale Up: fades in while growing from slightly smaller.
• Rise & Settle: moves up a bit further and eases into place, for a weightier feel on large sections.
• Soft Focus: starts blurred and sharpens into focus.
• Slide In (Left): slides in horizontally from the left.
• Elastic Pop: scales in with a small springy overshoot. Best for buttons.

Reveal effects (images)

• Curtain Reveal and Wipe Reveal: the image is uncovered by a moving edge (using clip-path) instead of fading.
• Parallax Scroll: the image drifts slightly slower than the page as you scroll (up to 16% of its height). It's scaled up just enough to never show gaps, and clipped to its original box so the layout doesn't change. Images under 150px tall and SVG icons get a simple fade instead.

Text effects

• Line Reveal: text appears line by line.
• Word Cascade (headings) and Word Fade (paragraphs): text appears word by word.

For word and line effects, the engine temporarily wraps each word in its own element. Links, underlines and the text itself are preserved. Text with a gradient fill is never split, because that would make it invisible.

Hover effect

• Magnetic Hover: buttons lean slightly toward the cursor when it's close. It only works on devices with a mouse, and is turned off for visitors who prefer reduced motion.

Page Transition

Plays when a visitor clicks a link to another page on your site. Choose Curtain (curved), Wipe or Fade, and pick the transition color.

• Links to other websites, same-page anchor links (#section) and links opening in a new tab navigate normally.
• Using the browser's Back/Forward buttons never leaves the transition stuck over the page.

Options

Preview Tools

• Replay (next to Load Site): plays all animations again from the current scroll position.
• Preview Reduced Motion: shows what visitors who turned on "reduce motion" in their device settings will see. See Accessibility.
• Links in the preview work as normal, so you can open other pages of your site and check them too.

Adjusting Single Elements

Give one element its own effect, or keep a logo, form or pricing table completely still while the rest of the page animates. The settings panel has two tabs: General for the whole site, and Adjusted Elements for single elements.

Option 1: In the animator (no code)

1. Hover over the element in the preview. A purple outline shows what you're about to edit. Click the pencil icon in its corner.
2. The panel switches to the Adjusted Elements tab and opens Adjust Element, showing which element you're editing. That element stays outlined in the preview.
3. Choose an effect for This heading (or image, button…). For a section, there's also one setting for each kind of content inside it: Headings inside, Text inside, Images inside and Buttons inside. Default follows your General settings.
4. To stop it moving, click Don't animate. This sets everything to None. Reset returns it to the General settings. The preview replays after each change.
5. Click All adjusted elements to go back to the list. From there you can reopen an element or remove its adjustment with ×. Adjusted elements keep a filled pencil icon in the preview.
6. Click Generate Script and replace the snippet on your site. Elements you opened but didn't change ("no changes yet") aren't included.

Applies to

By default, an adjustment works on every page, which suits headers, footers and repeated layouts. Choose This page only to limit it to the page you made it on.

Elements inside an animated section

Turning off an element's animation doesn't stop the area around it. If an image sits inside a section that slides up, the image slides up with it. The panel warns you when this happens and offers Adjust the section instead. To keep a whole area still, adjust the section and click Don't animate.

Option 2: Add a class or attribute (for developers)

If you can edit your HTML, add either of these to any element. It and everything inside it will be skipped on every page:

<div class="rd-no-anim"> ... </div>
<form data-rd-skip> ... </form>

Many builders let you add a CSS class without editing code: Webflow (Selector field), Elementor (Advanced → CSS Classes) and WordPress blocks (Advanced → Additional CSS class).

Editing Settings in the Snippet

Your choices are stored in plain text in the snippet, so small changes can be made directly in your site's header without regenerating:

window.rdAnimConfig = {
  "sections": "fade-up",
  "images": "scale-up",
  "headings": "fade-up",
  "paragraphs": "fade-in",
  "buttons": "scale-up",
  "stagger": true,
  "replay": false,
  "transition": "none",
  "transitionColor": "#141517",
  "smoothScroll": true
};

Set any group to "none" to switch it off. To use a different effect, regenerating the script in the animator is the safest way to get the correct value. Adjusted elements are saved as "rules" in the same settings. Change them in the animator rather than by hand.