Created
January 7, 2022 15:26
-
-
Save ayamflow/3ed96bbbacd056b7eee3ebbb5e7a201a to your computer and use it in GitHub Desktop.
Tween array values with animejs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import anime from 'animejs' | |
/** | |
Options are your usual animejs options. | |
They need to have a value: XX or value: [start, end]. | |
Add a special `stagger` prop | |
Have not tested with diff target values or more complex use case | |
but the power is in your hands now | |
*/ | |
export function animateArray(array, options) { | |
const stagger = options.stagger || 0 | |
delete options.stagger | |
const targets = array.map((val, i) => { | |
return { | |
value: options.value[0] || options.value, | |
index: i, | |
} | |
}).sort((a, b) => Math.random() > 0.5 ? -1 : 1) | |
return anime({ | |
targets, | |
...options, | |
delay: anime.stagger(stagger), | |
update: () => { | |
targets.forEach(target => { | |
array[target.index] = target.value | |
}) | |
} | |
}) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment