Widgets
Integrations
Squarespace Extension WordPress Plugin
Site animator

Knowledge Base

Guides, tutorials, and tips to get the most out of Redesignee.

Site Animator Updated November 2026

Site Animator Overview

The Site Animator adds scroll-triggered entrance effects, smooth scrolling and page transitions to an existing website. You pick the effects in a visual previewer, then paste one snippet into your site's <head>. No widgets, blocks or page edits are needed.

It works on any platform that lets you add code to the <head>: Squarespace, WordPress, Webflow, Shopify, Wix, Framer and hand-coded sites.

Quick Start

  1. Open the Site Animator, enter your website address and click Load Site.
  2. Pick a Theme Preset or set an effect for each element group (sections, images, headings, paragraphs, buttons). The preview updates live. To change or turn off a single element, click the pencil icon on it in the preview (see Adjusting Single Elements).
  3. Click Generate Script and copy the code.
  4. Paste it inside the <head> of your site, as high up as possible. See platform instructions.
Head, not footer: Unlike Redesignee widgets, the animator snippet belongs in the Header code area. Placed in the footer, your content can briefly appear and then jump into its animated starting position.

How It Works

The snippet has three parts: a tiny style rule, your settings (window.rdAnimConfig) and the engine script. When a page loads, the engine:

  1. Finds elements by their HTML tags. Headings are h1–h6, images are img, picture, svg and video, and so on. Each group gets the effect you chose. The full list is in the Effects Reference.
  2. Sets each element to its starting state (for example, invisible and 50px lower) while the page is still hidden.
  3. Reveals the page, then plays each element's animation once its top edge passes 90% of the screen height.

Elements you've already scrolled past (for example, after reloading halfway down a page) appear immediately without animating.

Performance

Engine size About 25 KB minified, about 8 KB compressed in transfer.
Dependencies None. Plain JavaScript: no jQuery, GSAP or other libraries.
Loading Loaded with defer, so it downloads in parallel and never blocks your page from rendering.
Animation method CSS transitions on transform, opacity, clip-path and filter, which browsers run on the GPU.
Longest animation 1.65 seconds. Staggered groups are capped at 10 steps of 80ms, so a large batch never waits several seconds.
Smooth scrolling Time-based, so it feels the same on 60Hz and 120Hz screens. Keyboard scrolling, scrollbar dragging and anchor links are left to the browser.
About the brief page hide

To stop visitors from seeing content flash and then jump into position, the snippet keeps the page invisible until the engine has set everything up. On a typical connection this takes a fraction of a second.

Safety timeout: if the engine is slow or can't load (for example, it's blocked by an extension or the network fails), the page is shown anyway after 3 seconds, without animations. When a visitor arrives through a page transition, this limit is 5 seconds, and the screen shows the transition color in the meantime.

Accessibility & Reduced Motion

The engine checks the visitor's prefers-reduced-motion setting, available in macOS, iOS, Windows and Android accessibility settings. When it is on:

  • Every entrance effect becomes a short, simple fade (0.6 seconds). Nothing slides, scales, blurs or splits into words.
  • Page transitions are turned off. Links open the next page normally.
  • Parallax, magnetic hover and smooth scrolling are turned off.

This happens automatically. You don't need to change any settings. To see it yourself, switch on Preview Reduced Motion in the animator panel.

The engine also leaves form fields, scripts and code untouched. It doesn't split gradient-filled text into words, because that would make the text invisible.

Privacy & Data

  • No cookies. The engine doesn't read or set cookies.
  • No tracking or data collection. The engine sends no data about your visitors anywhere. Everything runs in the visitor's browser.
  • One request. The engine file is loaded from redesignee.com, just like any other script or font your site loads.
  • Session storage for transitions only. If page transitions are on, a short-lived value is kept in sessionStorage so the next page knows to finish the transition. It's cleared right away and never leaves the browser.

Because the animator doesn't set cookies or track visitors, it doesn't usually need to appear in a cookie consent banner. Check with your own legal adviser if you're unsure.

Free Version & Licensing

The animator is free to use on any site. The free version adds a small "Animated by Redesignee" badge to your pages.

Single-domain license

A one-time $20 purchase removes the badge for one domain.

Premium

Removes the badge and unlocks the full Redesignee widget library. See Premium plans.

Checking What the Animator Does

Add ?rd-debug to any page address on your site (for example yoursite.com/about?rd-debug) and open the browser console (F12 → Console). For each adjusted element, the animator reports whether it was applied, not found on this page, or skipped because it's set to a different page. Visitors never see this.

Changing or Removing Animations

To change effects: load your site in the animator again, adjust the settings, generate a new script and replace the old snippet completely.

To remove animations: delete the snippet from your site's header. The animator never changes your page content, so your site goes straight back to how it was.