Skip to content

v0.25.0

Compare
Choose a tag to compare
@nandorojo nandorojo released this 08 Mar 19:12
· 76 commits to master since this release

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.