Wappler Motion Studio

Wappler Extensions
1

Wappler Motion Studio — visual animation timelines for App Connect

Hi everyone! I've published a free, open-source extension that lets you build animation timelines visually in Wappler, powered by Anime.js v4 (MIT).

Showcase Example

Wappler's built-in animations are great for simple enter/inview effects. Motion Studio is for when you need more:

  • Sequences: title, then text, then buttons, with overlaps you control
  • Control from any event: play, pause, reverse, seek, restart, toggleDirection (perfect for menus and modals)
  • Scroll: play/reverse on scroll, or scrub the animation with the scrollbar
  • Stagger: from first, center, last, random, or 2D grids
  • Any property: x, y, rotate, rotateY, scale, opacity, colors, size, filter, clipPath...
  • Data you can bind: progress, currentTime, completed... (progress bars, chaining actions)

Installation

Project Settings → Extensions → + → wappler-motion-studio → Save, then accept the Project Assets Updater. Anime.js is bundled, so there are no CDN dependencies.

How it works

Add a Motion Timeline and put Motion Steps inside it. Each step has Animate from / Animate to checkboxes:

  • Only from: entrances (e.g. y 60, opacity 0 → slides up into place)
  • Only to: animate from the current state (colors, sizes...)
  • Both: from A to B
<dmx-motion-timeline id="intro" defaults-duration="800" defaults-ease="outCubic">
  <dmx-motion-step id="s1" targets=".hero h1" animate-from from-y="60" from-opacity="0"></dmx-motion-step>
  <dmx-motion-step id="s2" targets=".hero p" animate-from from-y="30" from-opacity="0" position="-=400"></dmx-motion-step>
  <dmx-motion-step id="s3" targets=".hero .btn" animate-from from-scale="0.8" from-opacity="0" stagger="100"></dmx-motion-step>
</dmx-motion-timeline>

Open/close menu with one button:

<button dmx-on:click="menu.toggleDirection()">Menu</button>

All attribute names follow the Anime.js API, so its documentation applies directly (eases like outBack(1.7), positions like << or -=300, onScroll options...).

Links

This is version 1.0.0, so feedback, bug reports and feature ideas are very welcome!

5 Likes