v0.25.0
This release is all about improving callbacks for animation changes.
Currently, the only way to know if a value animated is to use onDidAnimate
:
<MotiView
animate={{ loading: on ? 1 : 0 }}
onDidAnimate={() => {}}
/>
However, it's pretty hard to know which item animated, and when. This gets especially hard if you have a sequence.
Moti now offers granular animation callbacks for both inline styles and sequences.
Inline Animation Callbacks
You can now listen for animations by passing an object to any animation style, and giving it an onDidAnimate
function.
<MotiView
animate={{
opacity: {
value: loading ? 1 : 0,
onDidAnimate(finished, maybeValue, { attemptedValue }) {
if (attemptedValue == 1) {
// ...
}
}
}
}}
/>
Sequence Item Callbacks
The same goes for sequences. You can pass onDidAnimate
to a sequence item's object, and instead of attemptedValue
, you'd use attemptedSequenceItemValue
.
onDidAnimate
.
Lastly, the regular onDidAnimate
prop was given a new attemptedSequenceItemValue
.