Native Motion

Vesk Native maps the web motion API to native Compose `Animatable`/`animate*` calls. CSS `animation-*` classes are not supported — the compiler warns and points to `motion.animate()` instead.

motion.animate()

										
											export component FadeIn() {
  const ref = { x: 0 }

  <div
    ref={ref}
    class="p-6 rounded-2xl bg-indigo-600 text-white"
    onClick={() => {
      motion.animate(ref, {
        x: 100,
        opacity: 0.5,
      }, { duration: 300 })
    }}
  >
    Tap to slide
  </div>
}
										
									

• Animate `x`, `y`, `scale`, `rotate`, `opacity`, `width`, `height`, and more.
• The second argument holds the target property values; the third holds options (`duration`, `ease`, spring properties).
• `motion.animate()` returns `MotionControls` — dispatch to `motionAnimateElement` (ref) or `motionAnimateNumber`.
• Per-property in-flight animation jobs are cancelled on new calls — connected interrupts work naturally.

MotionRef properties

Timing & easing

Motion easing constants come from the real motion-utils values and are mapped to Compose `FontSpline` easing / `SpringSpec`:

Other motion helpers

• `motionSpring`, `motionTween`, `motionEase`, `motionCubicBezier`, `motionSteps`, `motionReverseEasing`, `motionMirrorEasing`, `motionDelay` — the animation option constructors.
• `motionInView(element, options)` — triggers when the element enters the viewport.
• `rememberMotionRef` — Compose-memoized MotionRef.
• `motionGraphics` / `motionStagger(item, index)` — stagger children animations.
• `motionScroll` / `motionDrag` / `motionHover` / `motionPress` / `motionFocus` — gesture and scroll-driven animation counters.

motionInView

										
											export component FadeIn() {
  const ref = { x: 0 }

  <div
    ref={ref}
    class="p-6 rounded-2xl bg-indigo-600 text-white"
    onClick={() => {
      motion.animate(ref, {
        x: 100,
        opacity: 0.5,
      }, { duration: 300 })
    }}
  >
    Tap to slide
  </div>
}