Timeline resize values

inspector/src/components/actionTabs/tabs/propertyGrids/animations/animationCurveEditorComponent.tsx

@@ -1599,13 +1599,15 @@ export class AnimationCurveEditorComponent extends React.Component<
                     this.props.scene.stopAnimation(target);
                 }
                 let keys = this.state.selected.getKeys();
-                let firstFrame = keys[0].frame;
-                let LastFrame = this.state.selected.getHighestFrame();
-                if (direction === 1) {
-                    this._mainAnimatable = this.props.scene.beginAnimation(target, firstFrame, LastFrame, this.state.isLooping);
-                }
-                if (direction === -1) {
-                    this._mainAnimatable = this.props.scene.beginAnimation(target, LastFrame, firstFrame, this.state.isLooping);
+                if (keys.length !== 0) {
+                    let firstFrame = keys[0].frame;
+                    let LastFrame = this.state.selected.getHighestFrame();
+                    if (direction === 1) {
+                        this._mainAnimatable = this.props.scene.beginAnimation(target, firstFrame, LastFrame, this.state.isLooping);
+                    }
+                    if (direction === -1) {
+                        this._mainAnimatable = this.props.scene.beginAnimation(target, LastFrame, firstFrame, this.state.isLooping);
+                    }
                 }
 
                 this._isPlaying = true;

inspector/src/components/actionTabs/tabs/propertyGrids/animations/timeline.tsx

@@ -400,11 +400,14 @@ export class Timeline extends React.Component<
                                         <svg key={`tl_${frame}`}>
                                             {
                                                 <>
-                                                    <text x={(i * 100) / this.state.selectionLength.length + "%"} y="18" style={{ fontSize: 10, fill: "#555555" }}>
-                                                        {frame}
-                                                    </text>
-                                                    <line x1={(i * 100) / this.state.selectionLength.length + "%"} y1="22" x2={(i * 100) / this.state.selectionLength.length + "%"} y2="40" style={{ stroke: "#555555", strokeWidth: 0.5 }} />
-
+                                                    {frame % Math.round(this.state.selectionLength.length / 20) === 0 ? (
+                                                        <>
+                                                            <text x={(i * 100) / this.state.selectionLength.length + "%"} y="18" style={{ fontSize: 10, fill: "#555555" }}>
+                                                                {frame}
+                                                            </text>
+                                                            <line x1={(i * 100) / this.state.selectionLength.length + "%"} y1="22" x2={(i * 100) / this.state.selectionLength.length + "%"} y2="40" style={{ stroke: "#555555", strokeWidth: 0.5 }} />
+                                                        </>
+                                                    ) : null}
                                                     {this.getCurrentFrame(frame) ? (
                                                         <svg x={this._scrollable.current ? this._scrollable.current.clientWidth / this.state.selectionLength.length / 2 : 1}>
                                                             <line