Expand description
Motion animations for Autumn, with Maud + htmx ergonomics.
Add MotionPlugin to the app, put motion_script() in the page, and
animate declaratively:
use autumn_plugin_motion::{Motion, MotionPlugin, motion_script};
use autumn_web::prelude::*;
#[get("/")]
async fn index() -> Markup {
html! {
html {
head { (motion_script()) }
body {
// Typed builder: wraps the markup in an animated div.
(Motion::fade_up().delay(100).wrap(html! {
h1 { "Hello" }
}))
// Or raw attributes on your own elements:
p data-motion="fade" data-motion-delay="200" { "World" }
}
}
}
}
autumn_web::app()
.plugin(MotionPlugin::new())
.routes(routes![index])
.run()
.await;The plugin vendors Motion 12.x (MIT) — no npm, no
bundler — and installs it as an Autumn plugin asset bundle
(MOTION_ASSETS), served from memory under /static/_plugins/motion/
at content-hashed, immutably cached URLs with SRI hashes computed from the
embedded bytes. The init script
scans [data-motion] on load and re-scans on htmx:afterSwap, so every
htmx partial animates declaratively too. prefers-reduced-motion is
respected: no animations, content stays visible.
§Limits
- Motion+ (the paid motion.dev tier:
splitText,Cursor,Carousel,Ticker,AnimateNumber, …) is not included — only the MIT core. - The Motion version is pinned per plugin release (see
assets::MOTION_VERSION); upgrading Motion means upgrading the plugin. - Animations are enter/scroll effects on server-rendered HTML. There is no layout-animation / shared-element support in the declarative layer.
- Without JavaScript (or with reduced motion) everything renders statically — by design.
Structs§
- Motion
- A declarative animation: preset plus modifiers.
- Motion
Plugin - Installs the Motion animation assets in an Autumn app.
Enums§
- Ease
- An easing curve for a
Motionanimation. - InView
Amount - How much of the element must be visible before its
inViewanimation triggers. - Preset
- An animation preset, mirroring the keyframes in
assets/init.js. - Repeat
Type - How a repeated
Motionanimation restarts each cycle. - Stagger
From - Where a staggered cascade starts.
Constants§
- ASSETS_
NAMESPACE - URL namespace of the bundle: files are served under
/static/_plugins/motion/. - MOTION_
JS_ INTEGRITY sha384Subresource Integrity hash of the upstream file vendored asassets/motion.min.js.- MOTION_
SOURCE - jsDelivr source URL of the vendored UMD build.
- MOTION_
VERSION - Pinned Motion version vendored in
assets/motion.min.js. - PLUGIN_
NAME - The plugin name in Autumn diagnostics.
Statics§
- MOTION_
ASSETS - The plugin’s asset bundle: Motion, the init script, and the stylesheet.
Functions§
- motion_
script - Renders the
<script>tags loading Motion and the plugin init script. - motion_
stylesheet - Renders the
<link>tag for the plugin stylesheet.