plus1tv / react-anime

✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!
https://codepen.io/collection/nrkjgo/
MIT License
1.56k stars 80 forks source link

TypeScript errors in 2.5.3 [Help Wanted] #34

Open stephenwil opened 7 years ago

stephenwil commented 7 years ago

Hi, Using create-react-app-ts, even a very basic

or <Anime delay={(e, i) => i * 100} scale={[.1, .9]}>

<div className="green"/>
<div className="red"/>

Fails on typescript errors: ren?: ReactNode; }> & Rea...'. Type '{ value: any; translateX: any; translateY: any; rotate: any; scale: any; opacity: any; color: any...' is not assignable to type 'Readonly'. Types of property 'children' are incompatible. Type 'Element' is not assignable to type 'any[]'. Property 'find' is missing in type 'Element'.

alaingalvan commented 7 years ago

Thanks for reporting this @stephenwil, weird to see this, maybe somethings changed with TypeScript 2.2.1 vs 2.5.3, I'll look into it. ;)

feather-aurelie commented 6 years ago

any update on that issue?

jonoirwinrsa commented 6 years ago

@stephenwil did you ever get to the bottom of this?

16abhimasani commented 4 years ago

This worked for me to fix all type errors. Just import relevant type and manually cast. I assume this would work for entire prop obj as well.

import Anime, { AnimeValue } from 'react-anime';
...

const wiggleFrames = [
    { value: xAmp * -1 },
    { value: xAmp },
    { value: xAmp / -2 },
    { value: xAmp / 2 },
    { value: 0 }
  ] as AnimeValue[];
...

<Anime duration={325} easing="easeInOutSine" translateX={inputError ? wiggleFrames : [0, 0]}>
    {amount}
</Anime>