Transform
Transform describes how a displayable element changes on screen: where it moves, how it scales, how it rotates, how visible it is, and which visual effects are applied.
Use it when an animation has more than one step, or when you want to reuse the same animation in multiple places.
import { Transform } from "narraleaf-react";
const bounce = Transform.create()
.position({ yoffset: -10 })
.commit({ duration: 120, ease: "easeOut" })
.position({ yoffset: 0 })
.commit({ duration: 100, ease: "easeOut" })
.repeat(2);
scene.action([
characterImage.transform(bounce),
]);Pages
Quick Recipes
Copyable movement, fade, timeline, and flash examples.
Sequences
Using commit(), constructor sequences, repeat(), and copy().
Properties
Position, scale, zoom, rotation, opacity, and font color methods.
Visual Effects
Mask, clip path, filter, backdrop filter, and blend mode methods.
How commit() Groups Changes
Add properties
Call every property that should change together before commit().
Transform.create()
.position({ xalign: 0.5 })
.zoom(1.1)
.opacity(1)Commit once
One commit() turns those property calls into one animation step. In this example, position, zoom, and opacity change at the same time.
Transform.create()
.position({ xalign: 0.5 })
.zoom(1.1)
.opacity(1)
.commit({ duration: 300, ease: "easeOut" })Continue
Property calls after commit() belong to the next step.
Transform.create()
.position({ xalign: 0.35 })
.opacity(1)
.commit({ duration: 300, ease: "easeOut" })
.position({ xalign: 0.65 })
.opacity(0.8)
.commit({ duration: 300, ease: "easeInOut" })For the full property types, see TransformDefinitions.