Lottie, Spline, Rive and Video

This content was generated with the assistance of AI and should be verified against the official Webflow documentation before being relied on in production.

This sub-section’s Webflow bibliography lists the reference material consulted while preparing these pages.

This page was checked against the Webflow Help Center, the Webflow updates feed and the DevLink documentation on 2026-10-28. Webflow is a hosted service without version numbers, so a menu name, a setting or a limit can change between two visits. The Lottie, Spline, Rive, Video and Background Video elements are available in the Designer of every plan, including the free Starter Site plan in a Starter Workspace; what a plan limits is hosting and export (for example, the Workspace plan needed to export code), not the elements.

Photographs and CSS can carry a great deal of a site, but a botanical garden has things that move: a seed that unfolds, a greenhouse seen in three dimensions, a mascot that reacts to the pointer, a looping film of rain on leaves. Webflow offers five elements for such content, in the Media group of the Add panel: Video (a YouTube or Vimeo embed), Background Video (a muted, looping film behind other elements), Lottie animation, Spline scene and Rive animation. They differ in what they hold, in how heavy they are and in how much a visitor can control them, and this page explains each in turn, then the questions they share: lazy loading, control from interactions, what code export does with them, file size, performance and accessibility.

The running example is the Fernbrook Gardens site, a fictitious botanical garden. Its home page has a looping rain-on-leaves film behind the hero, a small Lottie "growing seed" animation on the membership call to action, a Spline model of the glasshouse on the visit page, a Rive "garden guide" mascot that waves and reacts to the opening hours, and an embedded tour video from the events team.

Who uses what, and when

  • The designer places the elements, sets their options and fits them in the layout (see Elements and Page Structure and Images and Assets).

  • The motion designer produces the files in other tools: After Effects with a Lottie exporter for Lottie, the Spline editor for scenes, the Rive editor for Rive files, and a video editor for films. Webflow only hosts or embeds the results.

  • The marketer and the content editor see the effect on conversion and page speed, and are the people for whom reduced-motion and caption rules matter in practice.

  • The developer controls the players from code, lazy-loads them and measures their cost; see Performance Optimization and Custom Attributes and JavaScript.

Choosing between the formats

The four animation formats solve different problems, and the choice made at the start decides most of the cost later.

Format What it is Strengths Weaknesses

Lottie

A vector animation exported as JSON (.json) or as a compressed dotLottie archive (.lottie), played by a JavaScript player

Small for simple vector motion, scales without blur, scrubbable by scroll, controllable by Interactions

Not suited to photos or complex effects; the player script adds weight; very detailed animations are slow on phones

Spline

A real-time three-dimensional scene, published as a .splinecode file and rendered in a WebGL canvas

Interactive 3D without writing WebGL; mouse and scroll reactions made in the Spline editor

The heaviest option: runtime plus scene; battery and GPU cost; hard to make accessible

Rive

A vector animation with a state machine and data binding, in a .riv file, played by the Rive runtime

Interactive characters and controls that react to inputs; files tend to be small; one file can hold several artboards

A runtime to download; the best Webflow integration needs a ViewModel in the file

Video

A film, either embedded from YouTube or Vimeo or uploaded and played as a background

Photographic realism; widely understood controls

Large files; autoplay restrictions; needs captions and a text alternative

A short rule of thumb for Fernbrook: a flat decorative loop is Lottie or CSS; something the visitor can nudge is Rive; a model the visitor can rotate is Spline; a recording of real life is video. When a plain image or a CSS transition would do, use that, because every one of these needs a script, a file, or both.

Lottie

Lottie is an open animation format, originally from Airbnb, that describes shapes, paths and keyframes as data. The Lottie animation element reads one such file and plays it with a Lottie player in the page, drawing to SVG (or, depending on the player and options, canvas), so the animation stays sharp at any size.

File types

Webflow accepts two kinds of Lottie file in the Assets panel:

  • Lottie JSON (.json), the original format: a text file, easy to inspect and edit, larger than necessary because it is not compressed.

  • dotLottie (.lottie), a newer container that zips the JSON together with its images and can hold several animations. It is normally much smaller than the equivalent JSON, so it is the better delivery format when the tool that produced the animation can export it.

A dotLottie file cannot be dragged onto the canvas because of a browser limitation; upload it through the Assets panel and then pick it from the element’s settings. The general upload limits of the Assets panel apply to these files; no separate Lottie limit is documented, so keep files far below the limit that applies to documents, as a matter of speed and not of what the panel will accept.

Adding the element

  1. Open the Add panel and, in the Media group, drag Lottie animation into a div block.

  2. In the element settings, choose Replace Lottie sequence and select the JSON or dotLottie file from the Assets panel.

  3. Set whether the animation autoplays, whether it loops, its speed and its direction, or leave autoplay off and drive it from an interaction.

  4. Give the element a size in the Style panel. A Lottie element is a box; the animation fits inside it, so width and height (or an aspect ratio) decide what is drawn.

For Fernbrook, the growing-seed animation is a 240 by 240 pixel box inside the membership button’s wrapper, with autoplay off. It is played once when the visitor hovers the button.

Source: Webflow Help Center: Embed Lottie animations in Classic Interactions

Generated HTML

The published page contains a container that carries the settings as data- attributes, and Webflow’s runtime (webflow.js) mounts the player inside it. The attributes below are representative; their exact set and order can change between Webflow versions, and they are not a public contract.

<div
  data-w-id="seed-lottie"
  data-animation-type="lottie"
  data-src="https://cdn.prod.website-files.com/0000000000000000/seed.json"
  data-loop="0"
  data-direction="1"
  data-autoplay="0"
  data-is-ix2-target="1"
  data-renderer="svg"
  data-default-duration="2"
  data-duration="0"
  class="seed-animation"></div>

Source: Webflow Help Center: Embed Lottie animations in Classic Interactions

Two points follow from this output. The file is requested from the Webflow CDN when the player starts, not inlined in the HTML, so the animation does not delay the first paint but it does cost a request; and the data-is-ix2-target flag marks the element as something an interaction can drive, which is how play, pause and scrub actions reach it.

Lottie in interactions

Both interaction engines can control a Lottie element.

  • In Classic Interactions, a Lottie element can be played on a trigger (click, hover, scroll into view), or a section can scrub it from its first to its last frame while the page scrolls. This is the approach in the Embed Lottie article.

  • In Interactions with GSAP, Lottie has its own actions: play, pause, set a frame or progress, and a Set action for instant changes. The set of actions is documented in the Help Center article on Lottie actions.

The choice between the two engines is explained in Classic Interactions and Interactions with GSAP; for new work the GSAP engine is the one Webflow develops.

Source: Webflow Help Center: Using Lottie actions in Interactions with GSAP

Pitfalls

  • Authoring tools produce heavy files. An export with many layers, masks or embedded raster images can be hundreds of kilobytes; ask the motion designer to simplify before blaming Webflow.

  • Embedded images are not vectors. A Lottie that contains bitmaps is no longer small or sharp, and a dotLottie archive hides the bitmap weight until it is unpacked.

  • Text in a Lottie is not page text. It is not read by screen readers and not indexed; a text alternative must exist outside the animation.

  • The element has no intrinsic size reserved. Set the box size, otherwise the page shifts when the animation appears.

Spline

Spline is a design tool for three-dimensional scenes. A scene can react to the pointer or the scroll position through events defined in the Spline editor, and it can be published as a .splinecode file that the Spline runtime renders in a WebGL canvas.

Adding the element

The Spline scene element is in the Media group of the Add panel. Its settings take the URL of the published scene:

  1. In Spline, export the scene for the web and copy the link to the .splinecode file.

  2. In the Designer, drag Spline scene into a div block and paste the link into the element’s URL field.

  3. Size the element in the Style panel. As with Lottie, the canvas takes the size of its container, so give the container a fixed height or an aspect ratio, otherwise the scene is invisible or fills the viewport unexpectedly.

  4. Optionally open the Interactions panel to animate the scene’s objects, lights and camera from page events.

If the scene is edited and re-exported, the URL usually stays the same, but the browser and the Designer can keep the old file in cache; pasting the link again, or adding a version query to the URL, forces a refresh. Designers also report that a Spline scene can slow the Designer canvas itself, so a common practice is to keep the scene hidden while editing other parts of the page, or to work on a copy of the page.

Source: Webflow Help Center: Add a Spline scene to your Webflow site

Self-hosting the scene

The default is to point at a scene hosted by Spline. A site that wants to avoid a third-party request, or that needs the file to stay available if the link is removed, can upload the .splinecode file to a host it controls and load the runtime with an Embed element. Webflow’s own Made in Webflow showcase demonstrates this self-hosted pattern, including a variation that loads several scenes lazily while sharing one runtime. A self-hosted setup is custom code, and it is the owner’s responsibility to keep it working; see Custom Code, Head and Footer, and Embeds.

<!-- Embed element on the Fernbrook visit page: self-hosted Spline scene -->
<script type="module" src="https://unpkg.com/@splinetool/viewer@1.9.0/build/spline-viewer.js"></script>
<spline-viewer
  url="https://example.com/assets/fernbrook-glasshouse.splinecode"
  loading-anim-type="spinner-small-dark"
  events-target="global"></spline-viewer>

Source: Made in Webflow: Self Hosted Spline File in Webflow

The package version in the example is a placeholder to show the habit of pinning; check the current Spline viewer release before copying it, and prefer a version you have tested.

Cost and accessibility

A Spline scene downloads a runtime and a scene file, creates a WebGL context and renders continuously while it is visible. That makes it the most expensive of the five elements in bytes, in CPU and GPU time, and in battery use on a phone. Use it on a page whose purpose is the scene, put it below the fold behind lazy loading, and provide a still image or a text description for visitors whose device cannot run it.

Rive

Rive is a tool and runtime for interactive vector animation. A .riv file holds one or more artboards (separate canvases, for example one for the guide mascot and one for a loading indicator), and each artboard can hold several animations and one or more state machines. A state machine defines states such as "idle", "waving" and "sleeping" and the rules for moving between them, driven by inputs (a boolean, a number or a trigger) or, in newer files, by a ViewModel with typed properties that the page can read and write (data binding).

Adding the element

Rive support arrived in the Designer as a native element, announced in the Webflow updates feed. The element is in the Media group of the Add panel. The Rive file is uploaded to the Assets panel (.riv is one of the animation file types it accepts) and chosen in the element’s settings, where the artboard and the animation or state machine to play are selected. Because one file can hold several artboards, Fernbrook ships a single file, guide.riv, with the artboards "Mascot" and "Opening hours badge", and uses two Rive elements that point to the same file but select different artboards. The file is then downloaded once and cached.

Source: Webflow updates: Rive support

Rive with Interactions with GSAP

On 2026-04-17 Webflow announced that Interactions with GSAP can control Rive animations. The Interactions panel gains Rive actions (named Set Rive and Animate Rive), which expose to an interaction what the loaded file contains:

  • ViewModel properties. The properties of the file’s ViewModel appear automatically in the action’s settings, and an interaction can change numbers, text, colours, booleans and enums. Colours can be given in hex, RGB, HSL or named formats and are converted for the file; the values at the start of an interaction are captured, so reversing the interaction restores the original state.

  • Artboards. An action can switch the artboard shown by a Rive element within the same file.

  • State machine transitions. A transition can be triggered at a chosen point of an interaction’s timeline, for example when the hero scrolls out of view.

  • Runtime. The integration uses the current @rive-app/webgl2 runtime package, which brings vector feathering and smoother anti-aliased edges.

There is one important requirement: the Rive file must contain at least one ViewModel with exposed properties. A file that uses the older state-machine inputs approach cannot be driven by these actions and must be controlled with Classic Interactions instead. When a Fernbrook motion designer asks "can scroll set the mascot’s mood", the first question is therefore whether the file was built with data binding or with inputs.

File built with Controlled from Typical Fernbrook use

ViewModel (data binding)

Interactions with GSAP: Set Rive and Animate Rive

Scroll moves the mascot’s "growth" number from 0 to 100; the opening-hours badge text is set from an interaction

State machine inputs

Classic Interactions, or the Rive runtime in custom code

Hover on the membership button fires the "wave" trigger

Source: Webflow Help Center: Control Rive animations with Interactions with GSAP

Source: Webflow updates: Rive interactions with GSAP

Rive from custom code

Where the native element is not enough, the Rive runtime can be loaded in an Embed element. This keeps full control of inputs, events and lifecycle at the price of maintaining the code.

<canvas id="guide-canvas" width="320" height="320" aria-hidden="true"></canvas>
<script src="https://unpkg.com/@rive-app/canvas@2.26.0"></script>
<script>
  const guide = new rive.Rive({
    src: "https://example.com/assets/guide.riv",
    canvas: document.getElementById("guide-canvas"),
    artboard: "Mascot",
    stateMachines: "Guide",
    autoplay: false,
    onLoad: () => guide.resizeDrawingSurfaceToCanvas()
  });
  document.querySelector("[data-wave]").addEventListener("mouseenter", () => {
    const wave = guide.stateMachineInputs("Guide").find((i) => i.name === "wave");
    if (wave) wave.fire();
  });
</script>

Source: Rive documentation: Web (JS) runtime

The version in the example is a placeholder; pin a version you have tested.

Video

Webflow has two video elements, and they do different jobs.

The Video element (YouTube and Vimeo)

The Video element takes the URL of a YouTube or Vimeo video and publishes a responsive wrapper around an iframe. The film is hosted and streamed by the video platform, not by Webflow, which brings adaptive streaming and platform-level captions at the cost of third-party requests, cookies and tracking unless the platform’s privacy options are used. Webflow’s element settings include the URL, a start time on some platforms, and the choice of whether the player offers controls.

<div style="padding-top: 56.25%" class="w-embed-youtubevideo tour-video" id="tour-video">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID?rel=0&amp;controls=1&amp;autoplay=0"
    style="position:absolute;left:0;top:0;width:100%;height:100%"
    frameborder="0"
    allow="autoplay; encrypted-media"
    allowfullscreen=""
    title="Fernbrook Gardens: a walk through the glasshouse"></iframe>
</div>

Source: Webflow Help Center: The Add panel

The padding-top percentage is what keeps the 16:9 ratio, so the iframe is absolutely positioned inside a wrapper that reserves its height before the film loads. The structure above is representative of the published page; the wrapper class and attributes can differ between versions. Give the video a meaningful title in the element settings or with a custom attribute, because the title is what a screen reader announces for the iframe.

The Background Video element

The Background Video element plays a short film silently behind other elements. In the settings you upload one or two files (typically an MP4 and a WebM version), choose a poster image, and set autoplay and loop. The film is muted and played inline, which is what lets browsers autoplay it. The element is meant to be a container: other elements are placed inside it, on top of the film.

<div
  data-poster-url="https://cdn.prod.website-files.com/0000000000000000/rain-poster.jpg"
  data-video-urls="https://cdn.prod.website-files.com/0000000000000000/rain.mp4,https://cdn.prod.website-files.com/0000000000000000/rain.webm"
  data-autoplay="true"
  data-loop="true"
  data-wf-ignore="true"
  class="hero-video w-background-video w-background-video-atom">
  <video
    autoplay=""
    loop=""
    style="background-image:url(&quot;https://cdn.prod.website-files.com/0000000000000000/rain-poster.jpg&quot;)"
    muted=""
    playsinline=""
    data-wf-ignore="true"
    data-object-fit="cover">
    <source src="https://cdn.prod.website-files.com/0000000000000000/rain.mp4" data-wf-ignore="true">
    <source src="https://cdn.prod.website-files.com/0000000000000000/rain.webm" data-wf-ignore="true">
  </video>
  <div class="hero-content">...</div>
</div>

Source: Webflow Help Center: The Add panel

Note how the poster is both a data- attribute and the background-image of the video: while the film downloads, or when it is blocked, the poster is what a visitor sees. This is why the poster should be a real, optimised image of the first frame.

Recommended settings for a background film

  • Keep it under about ten seconds, muted (it always is) and without essential content: nothing important should be said or shown only in the film.

  • Export a small MP4 (H.264) and, if file size matters, a WebM version, at a resolution that matches the largest size it is shown at, not the camera’s resolution. A background that covers a 1440 pixel hero does not need 4K.

  • Upload a poster of the first frame, compressed as described in Images and Assets.

  • Do not use a Background Video above a long list of other content on a page that has to load quickly on mobile networks. Mobile browsers and data-saver modes can refuse to play it, so design so that the poster alone is a good hero.

Lazy loading

Lazy loading means postponing a download until the element is about to be seen. The five elements differ in what Webflow does for them.

Element Lazy loading

Lottie animation

The file is requested when the player is created. The player script is part of Webflow’s runtime. To avoid loading a large file, keep the animation small, or insert the Lottie from custom code when it scrolls into view.

Spline scene

Both runtime and scene load with the page unless the scene is created later. Self-hosting with an Embed lets the code create the viewer only when a placeholder enters the viewport.

Rive animation

The .riv file is requested with the element. The same pattern as Spline applies for the custom-code route.

Video (YouTube or Vimeo)

A hand-built iframe can carry the browser’s native lazy-loading attribute, which defers the embed until it nears the viewport. The Video element does not expose it as a setting, so use an Embed element with the iframe written by hand, as in the example below.

Background Video

The video element downloads according to the browser’s heuristics. Offscreen backgrounds should be avoided or replaced with a poster image.

A generic lazy-loading pattern uses an IntersectionObserver that creates the heavy element only when its placeholder enters the viewport. The example is for the Fernbrook glasshouse scene, and it assumes the Spline viewer script has been added to the page with a module script as shown earlier.

const holder = document.querySelector("[data-lazy-spline]");
if (holder && "IntersectionObserver" in window) {
  const observer = new IntersectionObserver((entries, obs) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) return;
      const viewer = document.createElement("spline-viewer");
      viewer.setAttribute("url", holder.dataset.lazySpline);
      holder.appendChild(viewer);
      obs.unobserve(holder);
    });
  }, { rootMargin: "200px" });
  observer.observe(holder);
}

Source: MDN: Intersection Observer API

Custom code, including this script, is described in Custom Attributes and JavaScript and Third-Party Libraries and Scripts. The related guidance about the images that sit around these elements is in Images and Assets.

For the plain iframe of a YouTube embed, a native attribute is enough:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Fernbrook Gardens: a walk through the glasshouse"
  loading="lazy"
  allowfullscreen></iframe>

Source: MDN: iframe element

Controlling the media from interactions

Interactions are the Webflow way to connect page events to these elements without writing code.

Element Classic Interactions Interactions with GSAP

Lottie

Play on a trigger, or scrub with scroll

Play, pause, set progress, Set action

Spline

Animate object, light and camera properties of the scene from a trigger

The Spline actions of the Interactions panel; check the panel for the current list

Rive

State machine and animation control

Set Rive and Animate Rive for files that have a ViewModel

Video and Background Video

The elements are plain boxes, so ordinary transform and opacity animations apply; play and pause need custom code

The same; for play and pause use the media API from custom code

For a video, the platform API is the right control: the Video element’s iframe can be driven with the YouTube IFrame API or the Vimeo player library, and a Background Video can be paused with the standard HTMLMediaElement methods.

const hero = document.querySelector(".hero-video video");
const toggle = document.querySelector("[data-hero-toggle]");
if (hero && toggle) {
  toggle.addEventListener("click", () => {
    if (hero.paused) {
      hero.play();
      toggle.setAttribute("aria-pressed", "false");
    } else {
      hero.pause();
      toggle.setAttribute("aria-pressed", "true");
    }
  });
}

Source: MDN: HTMLMediaElement

Two things are worth knowing. First, interaction targets are chosen by element, and a Lottie, Spline or Rive element is an ordinary target in the Interactions panel, so a scroll-into-view trigger on the membership section can start the seed animation. Second, Interactions with GSAP supports breakpoints, reduced-motion settings and page scoping (added on 2025-09-30), so a motion can be turned off on phones or for visitors who prefer less motion; the details are in Interactions with GSAP.

What code export does with them

Webflow’s code export produces static HTML, CSS and JavaScript of the pages and assets (see Code Export and Portability). Media behave as follows.

  • Uploaded assets (Lottie JSON and dotLottie files, Rive files and uploaded videos) are part of the site’s assets; the export downloads the files that the pages reference.

  • Native elements still depend on Webflow’s runtime script, which is included in the export, so a Lottie or Background Video element keeps working in an exported site.

  • Embeds and iframes (YouTube, Vimeo, self-hosted Spline or Rive code) are exported as written, because they are plain HTML; they work as long as the external hosts do.

  • Interactions that target Lottie, Spline and Rive are the exception for DevLink component export: the Webflow documentation lists Lottie, Spline and Rive actions among the actions not yet supported when exporting components. They produce a warning on export and do not block it; the component is exported without them, and its remaining triggers and timelines still run.

  • Site-level export is described in the code export article, which also lists the limits of the export (for example, the CMS is not part of it).

The practical consequence for Fernbrook is to keep a "static fallback" for each effect: if the animation does not survive a move to another host, the page still reads correctly.

Source: DevLink: Interactions

Source: Webflow Help Center: How do I export my Webflow site code?

File size and performance

Motion media are the heaviest items of a typical marketing page. Page speed budgets are discussed in Performance Optimization; the specific guidance for these elements is as follows.

  • Measure before shipping. Open the browser’s network panel and note the size of the Lottie file, the Rive file, the Spline scene and runtime, and the video. A Fernbrook target is: under 100 kilobytes per Lottie or Rive file, under 2 megabytes for a short background loop, and no Spline scene on a page that is a landing page for mobile traffic.

  • Prefer dotLottie to JSON where possible, and remove unused layers, hidden frames and embedded bitmaps in the authoring tool.

  • Reuse a single Rive file for several artboards instead of several files.

  • Cut the dimensions of the video to the maximum size displayed, and its frame rate to 24 or 30 frames per second; a loop of rain on leaves rarely needs more.

  • Limit the number of simultaneous animations. Each running Lottie, Rive or Spline canvas consumes CPU or GPU time even when it is off the screen unless paused. Pause or destroy those that are not visible.

  • Reserve space. Set the size or aspect ratio of every element so that the layout does not shift when it appears; layout shift is part of the Core Web Vitals.

  • Use a poster or a static fallback for the largest media so that the first paint does not wait.

  • Mind the Designer too. Spline scenes and several Lottie animations can make the canvas sluggish; the published site is not affected in the same way.

  • Mind the hosting. Uploaded files are served by Webflow’s CDN, which suits small assets. Hours of film or a large number of high-resolution videos are better served by a video platform, which is the reason for the Video element.

Accessibility

Moving content is an accessibility topic in its own right. The general rules are in Accessibility; for these elements they translate as follows.

  • Respect reduced motion. Visitors who set "reduce motion" in their operating system expose that choice to the page through the prefers-reduced-motion media query. Interactions with GSAP has reduced-motion settings for the interactions themselves; a background film or a self-hosted animation must be paused by code or hidden by CSS.

  • Provide a pause control for anything that moves for longer than five seconds and is not essential. A looping background film qualifies; a button that calls pause() as in the example above satisfies this.

  • Captions and transcripts. A film with speech needs captions and, ideally, a transcript. YouTube and Vimeo provide caption support; for an uploaded film, captions need a track element, which the Background Video element does not provide because it is meant to be silent and decorative.

  • No autoplay audio. Browsers block autoplay of sound anyway, and a page that plays sound by surprise is hostile to screen reader users. Keep background films muted, and start audio only on a click.

  • Text alternatives. An animation that conveys information (the opening hours badge) needs the same information as live text; an animation that only decorates should be hidden from assistive technology with aria-hidden="true" on its container, as in the Rive example above.

  • Avoid flashing. Do not exceed three flashes per second, in video or animation.

  • Keyboard and focus. A Spline scene or a Rive canvas that responds to the pointer must have a keyboard equivalent or must be purely decorative; do not trap focus in a canvas.

The following CSS hides the decorative layers and stops the film for visitors who prefer reduced motion. The script that pauses the film belongs in the same Embed.

@media (prefers-reduced-motion: reduce) {
  .hero-video video,
  .seed-animation,
  .guide-canvas-wrapper {
    display: none;
  }
  .hero-video {
    background-image: url("https://cdn.prod.website-files.com/0000000000000000/rain-poster.jpg");
    background-size: cover;
  }
}
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)");
function applyMotionPreference() {
  document.querySelectorAll(".hero-video video").forEach((video) => {
    if (reduce.matches) video.pause();
    else video.play().catch(() => {});
  });
}
applyMotionPreference();
reduce.addEventListener("change", applyMotionPreference);

Source: MDN: prefers-reduced-motion

Putting it together on the Fernbrook home page

  1. The hero is a Background Video (rain.mp4 and rain.webm, 8 seconds, 1280 pixels wide, with a poster). The heading and the call to action sit inside it. A pause button is added through an Embed, and a reduced-motion rule hides the film and shows the poster.

  2. The membership call to action carries a Lottie animation (seed.lottie, about 20 kilobytes), played once by an interaction on hover and again when the section scrolls into view. It is hidden for reduced motion, and the button text carries all the meaning.

  3. The guide mascot is a Rive element (guide.riv, artboard "Mascot"), built with a ViewModel, whose "mood" number is set by an Interactions with GSAP action as the page scrolls.

  4. The visit page has a Spline glasshouse scene that is created only when its placeholder approaches the viewport, with a photograph as the fallback and a text description of the glasshouse next to it.

  5. The events page uses a Video element for the tour, with captions turned on at the platform and a lazy-loaded iframe.

Common errors

  • Nothing appears. The element has no size (a Spline or Lottie container with zero height), the file URL is wrong, or the file type is not accepted by the Assets panel.

  • The Rive actions list is empty. The file has no ViewModel with exposed properties; re-export it with data binding, or use Classic Interactions.

  • A dotLottie file will not drop onto the canvas. Upload it in the Assets panel and choose it from the element settings.

  • Background Video does not play on a phone. The browser is in a data-saving or low-power mode; make the poster a good hero image.

  • A Spline scene shows an old version. Cache; re-paste the link, or add a version query to the URL.

  • The video autoplays with sound blocked. This is by design; use a muted background or require a click.

  • The animation stopped after an export. Native interaction actions for Lottie, Spline and Rive are not exported with DevLink components.

  • The page jumps while loading. Reserve space with a fixed size or an aspect ratio.

Security and privacy

A YouTube or Vimeo embed loads the platform’s scripts and may set cookies for the visitor; use the platform’s privacy-enhanced domain or ask for consent where the law requires it. A Spline scene or a Rive file hosted by a third party leaks the visitor’s IP address to that host; self-hosting avoids it. Scripts loaded from a public CDN should be pinned to a version and, where possible, verified with a Subresource Integrity attribute. Do not put API tokens or private URLs in the Embed element, because everything in it is public in the published page source.

When things changed

  • Lottie animations were added to the Designer first as a Classic Interactions feature, and later received their own actions in Interactions with GSAP.

  • Rive became a native element (Webflow updates, "Rive support").

  • On 2026-04-17 Interactions with GSAP gained the Rive actions that work with ViewModels, artboard switching and state machine transitions.

  • Interactions with GSAP gained breakpoints, reduced-motion support and page scoping on 2025-09-30.

Older tutorials and books describe Lottie and Spline embedded only through Embed elements and the Classic Interactions, and do not know about Rive or the GSAP actions; where they disagree with the Help Center, follow the Help Center. See also Where Older Books and Tutorials Are Outdated.

References