reactjs - React-three-renderer animation and tweening solution needed -

struggling doing transitions in react-three-renderer right way.

movement, color change, state transitions etc.

need clean solution. non-css.

what can done?

import react 'react'; import react3 'react-three-renderer'; import * 3 'three'; import reactdom 'react-dom';  import { connect } 'react-redux';  import mesh './mesh.js';  import './overlay.css';  class overlay extends react.component {   constructor(props, context) {     super(props, context);     var angle1 = 1.5;      this.cameraposition = new three.vector3(0, 0, 5);     this.meshpositions = [];      this.state = {       meshquantity: 50,       grouprotation: new three.euler(0, 0, 0.45),       material: {         wireframe: false       },       geometry: {         height: 0.03,         width: 1       },       groupposition: new three.vector3(-25, -25, 0)     };      (let = 0; < this.state.meshquantity; i++) {       angle1 += 0.005;       var multi = math.abs(math.cos(angle1));       let mp = new three.vector3(0, 0, 0);       mp.x = 20 * math.random();       mp.y = 20 * math.random();       mp.z = 0;       mp.id = i;       this.meshpositions[i] = mp;     }      setinterval(       function() {         this.state.groupposition = new three.vector3(-25, -25, 0);       }.bind(this),       13000     );      this._onanimate = time => {       console.log(tweenfunctions.linear(10, 1, 10, 10));       this.setstate({         groupposition: new three.vector3(           this.state.groupposition.x + 0.07,           this.state.groupposition.y + 0.04,           0         )       });       angle1 += 0.005;       var multi = math.abs(math.cos(angle1));       this.state.geometry.width = multi * 70;     };   }    render() {     const width = window.innerwidth; // canvas width     const height = window.innerheight; // canvas height     return (       <react3         maincamera="camera" // points perspectivecamera has name set "camera" below         width={width}         height={height}         clearcolor={this.props.colorbackground}         antialias={true}         pixelratio={1}         onanimate={this._onanimate}>         <resources>           <meshbasicmaterial             resourceid="materialone"             color={this.props.color}           />         </resources>         <scene>            <perspectivecamera             name="camera"             fov={110}             aspect={width / height}             near={0.1}             far={100}             position={this.cameraposition}           />           <group             position={this.state.groupposition}             rotation={this.state.grouprotation}>             {this.meshpositions.map(meshpositions => (               <mesh                 key={meshpositions.id}                 position={meshpositions}                 resid={'materialone'}                 geometry={this.state.geometry}               />             ))}            </group>         </scene>       </react3>     );   } }  function mapstatetoprops(state) {   return {     color: state.itemclick.color.colorline,     colorbackground: state.itemclick.color.colorbackground   }; }  export default connect(mapstatetoprops)(overlay);