Log inGet Started

CDN & SDK Bundles

Publish animations via CDN and manage custom SDK bundles.

The Publish panel exports your animations in two ways: a single hosted script tag served via global CDN, or downloadable files you host yourself with a custom-built SDK bundle.

Opening the Publish panel

The Publish button appears in the Left Panel footer — desktop app only.

Left Panel → Footer → Publish

The button is disabled until the current timeline has at least one animation node with a selector. Click it to open the Publish overlay.

Publish overlay — CDN and self-hosted options

Cloud hosting (CDN)

The Cloud Hosting column is the recommended option. Your animations are bundled, uploaded to Convex storage, and served via a global CDN edge network.

How it works:

  1. Save your timeline — the animation code is stored in the Convex backend.
  2. Open the Publish panel. A ready-made <script> tag appears immediately.
  3. Copy the tag and paste it into your site’s <head>.

The tag points to a single JS file named after your project ID:

html 
<script src="https://<your-site>.convex.site/<project-id>.js?v=<version>"></script>

What’s inside the bundle:

  • Only the animations saved to the current project are included.
  • Path-based filtering is applied at runtime — each page loads only the timelines assigned to it (plus any global timelines).
  • The ?v= cache-buster updates automatically every time you save, so visitors always get the latest version without you manually invalidating caches.

Pages included

Below the script tag the panel lists every page path that has at least one animation, with a count of how many timelines are assigned to it. Global timelines are shown separately.

ColumnMeaning
PathThe URL path of the page (e.g. /, /about)
CountTotal number of timelines on that page
Global badgeHow many of those timelines are marked as global

Self-hosted

The Self-Hosted column gives you the raw files to host on your own server. This is useful when you cannot load external scripts or need full control over asset delivery.

  1. Download the SDK runtime

    Click Download SDK to get a minified JS file (motion-sdk-YYYY-MM-DD.min.js). This is the Motion.page SDK runtime — it must load before your animation code runs.

    Add it to your <head>:

    html 
    <script src="/js/motion-sdk.min.js"></script>

    The SDK shown here is a custom bundle — it contains only the features your animations actually use. See Custom SDK bundles below.

  2. Copy or download the animation code

    Select the scope from the dropdown, then copy or download the generated JS.

    ScopeWhat it includes
    Current TimelineThe timeline currently open in the builder
    Current PageAll saved timelines assigned to the current page
    Entire ProjectAll saved timelines across all pages in the project

    Add this file before the closing </body> tag:

    html 
    <script src="/js/motion-animation.min.js"></script>

  3. Export image sequences (if present)

    If your timeline uses image sequences, a third step appears. Set the Images base path to match where you will place the image folders on your server (default: /images/sequences/), then click Export Image Sequences to download the folders as a zip.

    The animation code references images relative to the base path you enter here — set it before downloading the animation code.

Custom SDK bundles

When you click Download SDK the builder does not give you the full SDK. It generates a custom bundle that includes only the modules your project actually uses.

The analysis runs over every saved timeline in the project and detects:

  • Triggers — pageLoad, scroll, hover, click, mouseMove, gesture, cursor
  • Features — stagger, textSplit

Unused modules are removed before the bundle is compiled. For simple animations (a few page-load fade-ins with no scroll triggers or text splitting) this can reduce the SDK size by up to 50% compared to the full bundle.

The bundle info is shown next to the step heading when available:

plaintext 
4 modules · 18.3 KB

If the SDK bundle is not available, the Download SDK button will be disabled.

Tip: The custom bundle is regenerated each time you open the Publish panel. Save all your timelines before exporting so every animation is reflected in the bundle.

Script tag integration

Place the two tags in the correct order — SDK first, animation code second:

html 
<!DOCTYPE html>
<html>
<head>
  <!-- Option A: CDN (recommended) -->
  <script src="https://<your-site>.convex.site/<project-id>.js?v=<version>"></script>

  <!-- Option B: Self-hosted SDK runtime -->
  <script src="/js/motion-sdk.min.js"></script>
</head>
<body>
  <!-- your page content -->

  <!-- Option B: Self-hosted animation code -->
  <script src="/js/motion-animation.min.js"></script>
</body>
</html>

For the CDN option, the single tag in <head> is all you need — the bundle includes both the SDK runtime and all animation code.

For the self-hosted option, loading the SDK in <head> and the animation code before </body> ensures the runtime is ready before the animations initialise.