Developer Integration Guide

Standalone Integration Guide

Use the complete SleekMotion animation system on any website (Bricks, Elementor, Gutenberg, or HTML) without installing the WordPress plugin.

Quick Start: 1-Click Header Snippet

Paste this single script block into your site's <head> section. It loads the animation engine and initializes it automatically.

<!-- SleekMotion Standalone Setup (Add to <head>) -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@glazedev/glaze@latest/dist/index.umd.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    if (typeof Glaze !== 'undefined') {
      Glaze.init();
    }
  });
</script>

1Include Required CDN Libraries

The animation system requires 3 lightweight libraries loaded from CDN: GSAP, GSAP ScrollTrigger, and the SleekMotion animation engine.

<!-- 1. GSAP Animation Engine & ScrollTrigger -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

<!-- 2. SleekMotion / Glaze Animation Engine -->
<script src="https://cdn.jsdelivr.net/npm/@glazedev/glaze@latest/dist/index.umd.js"></script>

2Initialize Engine on Page Load

Calling Glaze.init() tells the engine to automatically scan all HTML elements on the page for animation rules and trigger them when scrolled into view.

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Initialize the animation engine on page load
    if (typeof Glaze !== 'undefined') {
      Glaze.init();
    }
  });
</script>

3Animate Any Element

Copy any animation code from this Cheatsheet or Builder and paste it into your element using either a data-animate attribute or a CSS class.

<!-- Option A: Using data-animate attribute -->
<div data-animate="from:autoAlpha-0|y-40|duration-0.8|ease-power2.out">
  Your Card / Content
</div>

<!-- Option B: Using utility class -->
<div class="animate-from:autoAlpha-0|y-40|duration-0.8|ease-power2.out">
  Your Card / Content
</div>

4Scalable Presets Management (Recommended for Teams)

Instead of pasting long animation strings on 30 different page builder elements, define custom Preset Nicknames in a central JavaScript dictionary inside your site header.

How it works:

On any element in Bricks or Elementor, simply add class: animate-preset-card-reveal.
To update that animation site-wide 6 months later, edit 1 line in your header script below. All elements update automatically!

<!-- 
  ===================================================================
  SLEEKMOTION ANIMATION PRESETS REGISTRY
  ===================================================================
  DEVELOPER INSTRUCTIONS:
  1. To use a preset on any element, add class: "animate-preset-[name]"
  2. To update an animation site-wide, change its value below.
  3. Visual Builder: Use this app to build & tweak preset values visually.
  ===================================================================
-->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@glazedev/glaze@latest/dist/index.umd.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    if (typeof Glaze !== 'undefined') {
      Glaze.init({
        presets: {
          // [Card Entrance] Fades in & slides up 40px
          'card-reveal': 'from:autoAlpha-0|y-40|duration-0.8|ease-power2.out',

          // [Hero Title] Slow entrance for main page title
          'hero-heading': 'from:autoAlpha-0|y-60|scale-0.95|duration-1|ease-power3.out',

          // [Button Pop] Subtle pop for CTA buttons
          'btn-pop': 'to:scale-1.05|duration-0.3|ease-power1.out'
        }
      });
    }
  });
</script>

Where to Paste in Your Website

Bricks Builder Instructions

Go to WP Dashboard ➔ Bricks ➔ Settings ➔ Custom Code.
Paste the Step 4 Presets Snippet into the Header Scripts text area.
Click Save Settings.
Now you can use preset classes like animate-preset-card-reveal directly on any Bricks element!