Tango UI

0.9.9

Components

Tango Store

Tools

Update Log

MVP Verson: 0.9.9 beta

Get Started

Styles

Theme

Components

State management

Update Log

Horizon

1.0.3

A horizontal scroll animation component for building stunning and immersive scrolling experiences. You can also view the details and documentation on NPM.

Key Points

Horizontal Scrolling: Enables smooth horizontal scrolling through a series of cards while scrolling down the page.
Highly Customizable: Supports detailed customization for damping, sizes, gaps, padding, and custom renderer.
Damping Animation: Integrates a customizable scroll damping coefficient to create a smoother, more natural scrolling feeling.

Demo

1. Installation

npm install tango-horizon-cw

2. Code Format

import { Horizon } from "tango-horizon-cw";
import "tango-horizon-cw/style.css";

const HorizonDemo = () => {
  return (
    <div style={{ width: "40vw", height: "25vh", overflow: "auto", position: "relative" }}>
      <Horizon 
        boxCount={10} 
        boxWidth={200} 
        boxHeight={120} 
        topHeight={300} 
        bottomHeight={300} 
        middleHeight="25vh"
        topContent={<div style={{ textAlign: "center", paddingTop: "50px" }}>Scroll Down</div>}
        bottomContent={<div style={{ textAlign: "center", paddingTop: "50px" }}>End</div>}
      />
    </div>
  );
};

3. TypeScript

The component library exports types that can be used to set type constraints:

import { Horizon } from "tango-horizon-cw";
import type { HorizonProps } from "tango-horizon-cw";

const horizonConfig: HorizonProps = {
  boxCount: 15,
  boxWidth: 250,
  damping: 0.15,
  topContent: <div>Top Area</div>,
};

const MyComponent = () => {
  return <Horizon {...horizonConfig} />;
};

4. Demonstration

Scroll Down 👇

Bottom Content ✨

Props

Prop	Type	Accepted Values	Description	Default
className	string	-	Additional class name for the wrapper	-
topContent	ReactNode	-	Content for the top section	'TOP TITLE AREA'
bottomContent	ReactNode	-	Content for the bottom section	'BOTTOM TITLE AREA'
topHeight	number \| string	-	Height of the top section	1500
bottomHeight	number \| string	-	Height of the bottom section	1000
middleHeight	number \| string	-	Height of the middle section	'100%'
boxCount	number	-	Number of horizontal cards	20
boxWidth	number	-	Width of each card (px)	300
boxHeight	number	-	Height of each card (px)	300
boxGap	number	-	Gap between cards (px)	24
trackPaddingX	number	-	Horizontal padding of the track (px)	64
boxBorderRadius	number	-	Border radius of each card (px)	16
damping	number	0~1	Scroll damping coefficient	0.12
stopThreshold	number	-	Stop threshold for damping animation	0.1
wheelIdleDelay	number	-	Wheel idle delay (ms)	120