diff --git a/src/components/middle/message/hooks/useFocusMessage.ts b/src/components/middle/message/hooks/useFocusMessage.ts index 85613cedf..0bc950291 100644 --- a/src/components/middle/message/hooks/useFocusMessage.ts +++ b/src/components/middle/message/hooks/useFocusMessage.ts @@ -3,7 +3,7 @@ import fastSmoothScroll from '../../../../util/fastSmoothScroll'; import { FocusDirection } from '../../../../types'; // This is the max scroll offset within existing viewport. -const FOCUS_MAX_OFFSET = 1500; +const FOCUS_MAX_OFFSET = 1200; // This is used when the viewport was replaced. const RELOCATED_FOCUS_OFFSET = 1000; const FOCUS_MARGIN = 20; diff --git a/src/modules/actions/ui/messages.ts b/src/modules/actions/ui/messages.ts index 234182fd3..7231c7266 100644 --- a/src/modules/actions/ui/messages.ts +++ b/src/modules/actions/ui/messages.ts @@ -26,7 +26,8 @@ import { import { findLast } from '../../../util/iteratees'; import { IS_TOUCH_ENV } from '../../../util/environment'; -const FOCUS_DURATION = 2000; +const FOCUS_DURATION = 1500; +const FOCUS_NO_HIGHLIGHT_DURATION = 500; // Matches `fastSmoothScroll:MAX_JS_DURATION` const POLL_RESULT_OPEN_DELAY_MS = 450; let blurTimeout: number | undefined; @@ -269,7 +270,7 @@ addReducer('focusMessage', (global, actions, payload) => { newGlobal = updateFocusedMessage(newGlobal); newGlobal = updateFocusDirection(newGlobal); setGlobal(newGlobal); - }, FOCUS_DURATION); + }, noHighlight ? FOCUS_NO_HIGHLIGHT_DURATION : FOCUS_DURATION); global = updateFocusedMessage(global, chatId, messageId, noHighlight); global = updateFocusDirection(global, undefined); diff --git a/src/util/fastSmoothScroll.ts b/src/util/fastSmoothScroll.ts index c860819d0..cdef41e24 100644 --- a/src/util/fastSmoothScroll.ts +++ b/src/util/fastSmoothScroll.ts @@ -7,9 +7,10 @@ import { dispatchHeavyAnimationEvent } from '../hooks/useHeavyAnimationCheck'; import { fastRaf } from './schedulers'; import { animateSingle } from './animation'; -const MAX_DISTANCE = 1500; +const MAX_DISTANCE = 1200; const MIN_JS_DURATION = 250; -const MAX_JS_DURATION = 600; +const MAX_JS_DURATION = 500; +const SHORT_CURVE_THRESHOLD = 150; // px let isAnimating = false; @@ -115,8 +116,10 @@ function scrollWithJs( return; } + const absPath = Math.abs(path); + const transition = absPath < SHORT_CURVE_THRESHOLD ? shortTransition : longTransition; const duration = forceDuration || ( - MIN_JS_DURATION + (Math.abs(path) / MAX_DISTANCE) * (MAX_JS_DURATION - MIN_JS_DURATION) + MIN_JS_DURATION + (absPath / MAX_DISTANCE) * (MAX_JS_DURATION - MIN_JS_DURATION) ); const startAt = Date.now(); @@ -133,6 +136,10 @@ function scrollWithJs( }); } -function transition(t: number) { +function longTransition(t: number) { + return t === 1 ? 1 : 1 - 2 ** (-10 * t); +} + +function shortTransition(t: number) { return 1 - ((1 - t) ** 3.5); }