fix(ui): fix out of range warning (#939)

motion-canvas · Feb 7, 2024 · c9f466f · c9f466f
1 parent 7dafea0
commit c9f466f
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/packages/ui/src/components/timeline/RangeSelector.tsx b/packages/ui/src/components/timeline/RangeSelector.tsx
@@ -51,7 +51,6 @@ export function RangeSelector({rangeRef}: RangeSelectorProps) {
 
   return (
     <div
-      ref={rangeRef}
       className={clsx(
         styles.rangeTrack,
         shiftHeld && controlHeld && styles.active,
@@ -79,6 +78,7 @@ export function RangeSelector({rangeRef}: RangeSelectorProps) {
       }}
     >
       <div
+        ref={rangeRef}
         style={{
           flexDirection: start > end ? 'row-reverse' : 'row',
           left: `${framesToPercents(Math.ceil(Math.max(0, normalizedStart)))}%`,

diff --git a/packages/ui/src/components/timeline/Timeline.tsx b/packages/ui/src/components/timeline/Timeline.tsx
@@ -180,7 +180,7 @@ export function Timeline() {
 
     const isInUserRange = player.isInUserRange(frame);
     const isOutOfRange = player.isInRange(frame) && !isInUserRange;
-    if (!warnedAboutRange && !reduceMotion && isOutOfRange) {
+    if (!warnedAboutRange.current && !reduceMotion && isOutOfRange) {
       warnedAboutRange.current = true;
       rangeRef.current?.animate(borderHighlight(), {
         duration: 200,