menu-transitions-rtl

react-horizontal-scrolling-menu — Transitions and RTL

The single most important fact: noPolyfill defaults to true since v8.0.0 (src/index.tsx:183). With the default, every scroll uses native Element.scrollIntoView: transitionDuration, a function-valued transitionBehavior, and ScrollOptions duration/boundary are silently discarded (src/helpers.tsx:72-77). Only the string behaviors 'smooth'/'auto' survive — they are forwarded to the native call, with 'smooth' as the fallback (src/helpers.tsx:60-73). Any duration/easing work starts by setting noPolyfill={false}, which routes scrolling through the smooth-scroll-into-view-if-needed polyfill. The one exception: RTL menus must keep the default (see Tensions).

Setup

Animated transitions, minimum viable:

import React from 'react';
import {
  ScrollMenu,
  VisibilityContext,
  type publicApiType,
} from 'react-horizontal-scrolling-menu';
import 'react-horizontal-scrolling-menu/dist/styles.css';

function LeftArrow() {
  const api = React.useContext<publicApiType>(VisibilityContext);
  const disabled = api.useLeftArrowVisible();
  return (
    <button disabled={disabled} onClick={() => api.scrollPrev()}>
      Left
    </button>
  );
}

function RightArrow() {
  const api = React.useContext<publicApiType>(VisibilityContext);
  const disabled = api.useRightArrowVisible();
  return (
    <button disabled={disabled} onClick={() => api.scrollNext()}>
      Right
    </button>
  );
}

// itemId must stay on the component's props (ScrollMenu reads it);
// do not spread it onto the DOM node.
function Card({ title }: { itemId: string; title: string }) {
  return <div style={{ width: '160px', margin: '0 10px' }}>{title}</div>;
}

const items = Array.from({ length: 10 }, (_, i) => ({ id: `item-${i}` }));

export function AnimatedMenu() {
  return (
    <ScrollMenu
      LeftArrow={LeftArrow}
      RightArrow={RightArrow}
      noPolyfill={false} // REQUIRED — transition props are no-ops without it
      transitionDuration={1200} // ms, default 500
      transitionBehavior="smooth"
    >
      {items.map(({ id }) => (
        <Card itemId={id} key={id} title={id} />
      ))}
    </ScrollMenu>
  );
}