anime
anime copied to clipboard
Clear properties option when animatable target has reached it's last state
I'm having performance issues when animating lots of element within a page with a smooth scroll. I'm using anime.js to animate text letter by letter or word by word. The browser really does not seem to like having tons of transforms on individual elements + a transform on a parent element (for animating the scroll).
I've been using this as as hacky workaroun, obviously not ideal having an extra for loop for each frame of the animation. It does however make the scrolling a lot smoother than without the hack.
If we could have some similar to tweenMax's clearProps that would be great.
anime({
targets: els,
opacity: [0, 1],
update: (a) => {
for (let i = 0; i < a.animations.length; i++) {
const el = a.animations[i]
if(el.currentValue == el.tweens[0].to.original) el.animatable.target.style = ''
}
}
})