Motion components

A motion component is a component with its own timeline. Every instance plays that timeline on its own clock, so one animated button, badge or loader can be placed a hundred times, each starting, looping or reacting on its own.

1. 1.Select the layers, open + and Create motion component0:00
2. 2.Click Create Instance in the Design panel0:02
3. 3.The instance’s Motion section sets how it plays0:04
4. 4.Set Loop to Ping-pong0:04
5. 5.Press Space to play0:06

Description

A lower third in Animate. With the lower third selected, + in the timeline and Create motion component turn it and its keys into a component with its own timeline; the breadcrumb now names the component. Create Instance in the Design panel places an instance, whose Motion section sets Loop to Ping-pong, and Space plays it.

How to

Make a lower third you can reuse

1. Select the animated layers (the recording uses the Lower third template).
2. Click + in the transport bar, then Create motion component. The layers and their keys become a component in place, with its own timeline; the breadcrumb in the transport bar now names it (file › set › component).
3. Click Create Instance in the Design panel to place a copy. Every instance plays the component's timeline on its own clock.
4. With the instance selected, its Motion section sets how it plays: here Loop is set to Ping-pong.
5. Press Space.

Edit the component's timeline and every instance follows. Change one instance's Motion settings and only it changes.

Let each instance count to a different number

1. Open the component and select its number text. Choose Count up to its figure (Text animation).
2. In the component's Properties, Add property → Number, and name it Target.
3. Pick the counter's keys, then From Target in the transport bar's binding menu. Each instance now sets its own Target, and counts to it.

Reference

Inputs

In the component's Properties section, Add property offers Number, Color and Motion setting besides the usual ones:

• A Number or Color property can feed a layer: select a layer inside the component and pick the property in its Component inputs section. Each instance's value then plays there, even on a keyed path.
• A key can take its value from a Number or Color property too: pick keys, then From ‹property› in the transport bar (or Own value to go back). "Count to N" and "slide this far" become per-instance settings.
• A Motion setting shows one of the playback settings below on every instance, with the default you give it.

How an instance plays

Select an instance: its Motion section sets

The reset button plays the instance as the component does. In view starts when the frame is shown in present mode, or when it scrolls into view in an exported web page.

Variant states

In a component set, each variant can have its own timeline. When a prototype interaction changes an instance's variant, the new variant plays; State change only makes an instance wait for that. Layers shared between variants glide across the change with smart animate.

Motion libraries

Publish a library that contains motion components from Assets → Libraries → Publish, and list it on the marketplace: it is tagged Motion, and its listing shows a moving preview of each component, looping while it is on screen. Anyone can Add to file and find the components under Motion in their assets.