Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs.json
Original file line number Diff line number Diff line change
Expand Up @@ -494,6 +494,8 @@
"scripting/api-reference/interfaces/property-enum",
"scripting/api-reference/interfaces/property-list",
"scripting/api-reference/interfaces/property-view-model",
"scripting/api-reference/interfaces/transition",
"scripting/api-reference/interfaces/transition-child",
"scripting/api-reference/interfaces/transition-condition",
"scripting/api-reference/interfaces/trigger",
"scripting/api-reference/interfaces/view-model"
Expand Down
37 changes: 37 additions & 0 deletions scripting/api-reference/interfaces/transition-child.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
title: TransitionChild
---

A handle to one child (a nested artboard) of a Transition, valid only for
the duration of the `draw` (and `changed`) call it is passed to. Draw it
with `child:draw(renderer)`, wrapping the call in renderer state
(save / modulateOpacity / transform / clipPath / restore) to author the
transition effect.


## Fields

### `width`

The child artboard's natural width, useful for slide/scale math.


### `height`

The child artboard's natural height.


## Methods

### `draw`

{/* draw: (self: TransitionChild, renderer: Renderer) -> () */}
<div class="signature">
```lua
draw(renderer: Renderer) -> ()
```
</div>

Draw this child's content at the renderer's current transform.


87 changes: 87 additions & 0 deletions scripting/api-reference/interfaces/transition.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
---
title: Transition
---

Renders the visual change between an outgoing ("from") and incoming ("to")
child when a Transition's active child changes. The active child is chosen
natively (and is data-bindable, Solo-style); the script owns only how the
two children are composited. Declare any inputs you need (e.g. a director
Artboard, numbers, curves) as ordinary script inputs and drive the effect
however you like.

For more information, see [Transition Scripts](/scripting/protocols/transition-scripts).


## Fields

### `managesTo`

When false, the incoming ("to") child renders normally through the
artboard draw loop and is passed as nil to draw; the script composites
only the outgoing ("from") child (useful for "reveal" transitions where
the new content is already on-stage). Defaults to true (the script
composites both children). Read at the start of each transition, so it
may be set in init or changed.


## Methods

### `init`

{/* init: ((self: T, context: Context) -> boolean)? */}
<div class="signature">
```lua
init(self: T, context: Context) -> boolean
```
</div>

Called once when the transition is created.


### `changed`

{/* changed: ((self: T, from: TransitionChild?, to: TransitionChild?, direction: number) -> ())? */}
<div class="signature">
```lua
changed(self: T, from: TransitionChild?, to: TransitionChild?, direction: number) -> ()
```
</div>

Called when the active child changes. `from` is the outgoing child
(nil on the first show); `to` is the incoming child. `direction` is 1
when `to` is at a higher combined index than `from`, -1 when lower, and
0 when unknown (e.g. the first show). Reset your progress clock / seek
any input you drive here. Called again on interruption, where `from` is
the previously-incoming child.


### `advance`

{/* advance: (self: T, seconds: number) -> boolean */}
<div class="signature">
```lua
advance(self: T, seconds: number) -> boolean
```
</div>

Called every frame while a transition is in flight. Advance your own
progress (and any input you drive). Return true while running; return
false to signal completion, after which the runtime retires the
outgoing child and resumes drawing the active child normally.


### `draw`

{/* draw: (self: T, renderer: Renderer, from: TransitionChild?, to: TransitionChild?) -> () */}
<div class="signature">
```lua
draw(self: T, renderer: Renderer, from: TransitionChild?, to: TransitionChild?) -> ()
```
</div>

Composite the two children. Wrap each `child:draw(renderer)` in renderer
state (save / modulateOpacity / transform / clipPath / restore) to
author crossfade, slide, wipe, scale, and custom effects. Either child
may be nil (see `managesTo`).


15 changes: 15 additions & 0 deletions scripting/api-reference/renderer/renderer.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -202,3 +202,18 @@ end
```


### `modulateOpacity`

{/* function modulateOpacity(self, opacity: number): () */}
<div class="signature">
```lua
modulateOpacity(opacity: number) -> ()
```
</div>

Multiplies the opacity of subsequent draw calls by `opacity` (0..1).
Stacks multiplicatively and is captured by save()/restore(), so the
common pattern is: renderer:save(); renderer:modulateOpacity(a);
... draw ...; renderer:restore().