Horizontal Section

Horizontal scroll:

import { ScrollContainer } from 'react-nice-scroll';
import 'react-nice-scroll/dist/styles.css';

const Index = () => {
  return (
    <ScrollContainer>
      <section style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <h1>Hello World!</h1>
      </section>
      <HorizontalSection>
        <div className="ns-horizontal-section__item">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dui ligula, commodo quis quam in, accumsan
          finibus dolor. Nunc ac finibus purus. Vivamus ac risus euismod, pellentesque nunc id, auctor urna. Duis eu
          imperdiet arcu. Suspendisse eu nibh felis. Sed eros nibh, lobortis eget turpis eget, iaculis condimentum
          lacus.
        </div>
        <div className="ns-horizontal-section__item">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dui ligula, commodo quis quam in, accumsan
          finibus dolor. Nunc ac finibus purus. Vivamus ac risus euismod, pellentesque nunc id, auctor urna. Duis eu
          imperdiet arcu. Suspendisse eu nibh felis. Sed eros nibh, lobortis eget turpis eget, iaculis condimentum
          lacus.
        </div>
        <div className="ns-horizontal-section__item">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dui ligula, commodo quis quam in, accumsan
          finibus dolor. Nunc ac finibus purus. Vivamus ac risus euismod, pellentesque nunc id, auctor urna. Duis eu
          imperdiet arcu. Suspendisse eu nibh felis. Sed eros nibh, lobortis eget turpis eget, iaculis condimentum
          lacus.
        </div>
      </HorizontalSection>
      <section style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <h1>Hello World!!</h1>
      </section>
    </ScrollContainer>
  );
};

export default Index;

Demo

Check demo.

tip

Wrap each element in div.ns-horizontal-section__item.

HorizontalSection Props

Props	Value Type	Default Value
toRight	boolean	true
start	string	top top
addAnimation	(animation: gsap.core.Tween) => void	(animation) => {}

Animate Content in Horizontal Sections

import { useCallback } from 'react';

import ScrollTrigger from 'gsap/dist/ScrollTrigger';

import {
  ScrollContainer,
  HorizontalSection,
  gellyAnimation,
  parallaxAnimation,
  useGlobalState,
} from 'react-nice-scroll';
import 'react-nice-scroll/dist/styles.css';

const Index = () => {
  const [scroller] = useGlobalState('container');

  const addGellyAnimation = useCallback((containerAnimation: gsap.core.Tween) => {
    const items = document.querySelectorAll('.ns-horizontal-section__item__inner') as NodeListOf<HTMLDivElement>;

    items.forEach((item) => {
      ScrollTrigger.create({
        trigger: item,
        containerAnimation,
        start: 'left right',
        end: 'right left',
        scrub: 0.5,
        immediateRender: false,
        onUpdate: () => {
          const velocity = containerAnimation.scrollTrigger?.getVelocity();
          if (velocity && item) gellyAnimation(item, velocity, 'skewX', 150, -20, 20, 0.8, 'power3');
        },
      });
    });
  }, []);

  const addParallaxAnimation = useCallback(
    (containerAnimation: gsap.core.Tween) => {
      const items = document.querySelectorAll('.ns-horizontal-section__item__fig') as NodeListOf<HTMLDivElement>;

      items.forEach((trigger) => {
        const el = trigger.querySelector('img');
        if (el && scroller) {
          parallaxAnimation(el, trigger, scroller, 'right left', 'left right', 'x', -30, 30, containerAnimation);
        }
      });
    },
    [scroller]
  );

  return (
    <ScrollContainer>
      <section
        style={{
          height: '100vh',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <h1>Hello World!</h1>
      </section>
      <HorizontalSection addAnimation={addGellyAnimation}>
        <div className="ns-horizontal-section__item">
          <div className="ns-horizontal-section__item__inner">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dui ligula, commodo quis quam in, accumsan
            finibus dolor. Nunc ac finibus purus. Vivamus ac risus euismod, pellentesque nunc id, auctor urna. Duis eu
            imperdiet arcu. Suspendisse eu nibh felis. Sed eros nibh, lobortis eget turpis eget, iaculis condimentum
            lacus.
          </div>
        </div>
        <div className="ns-horizontal-section__item">
          <div className="ns-horizontal-section__item__inner">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dui ligula, commodo quis quam in, accumsan
            finibus dolor. Nunc ac finibus purus. Vivamus ac risus euismod, pellentesque nunc id, auctor urna. Duis eu
            imperdiet arcu. Suspendisse eu nibh felis. Sed eros nibh, lobortis eget turpis eget, iaculis condimentum
            lacus.
          </div>
        </div>
        <div className="ns-horizontal-section__item">
          <div className="ns-horizontal-section__item__inner">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dui ligula, commodo quis quam in, accumsan
            finibus dolor. Nunc ac finibus purus. Vivamus ac risus euismod, pellentesque nunc id, auctor urna. Duis eu
            imperdiet arcu. Suspendisse eu nibh felis. Sed eros nibh, lobortis eget turpis eget, iaculis condimentum
            lacus.
          </div>
        </div>
      </HorizontalSection>
      <section
        style={{
          height: '100vh',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <h1>Hello World!!</h1>
      </section>
      <HorizontalSection toRight={false} addAnimation={addParallaxAnimation}>
        <div className="ns-horizontal-section__item">
          <figure
            style={{
              height: '400px',
              width: '300px',
              minWidth: '300px',
              overflow: 'hidden',
              margin: '0',
            }}
            className="ns-horizontal-section__item__fig"
          >
            <img
              style={{
                transform: 'scale(1.2)',
                width: '100%',
                height: '100%',
                objectFit: 'cover',
              }}
              src="https://images.unsplash.com/photo-1487260211189-670c54da558d?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687"
              alt="react nice scroll"
            />
          </figure>
        </div>
        <div className="ns-horizontal-section__item">
          <figure
            style={{
              height: '400px',
              width: '300px',
              minWidth: '300px',
              overflow: 'hidden',
              margin: '0',
            }}
            className="ns-horizontal-section__item__fig"
          >
            <img
              style={{
                transform: 'scale(1.2)',
                width: '100%',
                height: '100%',
                objectFit: 'cover',
              }}
              src="https://images.unsplash.com/photo-1487260211189-670c54da558d?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687"
              alt="react nice scroll"
            />
          </figure>
        </div>
        <div className="ns-horizontal-section__item">
          <figure
            style={{
              height: '400px',
              width: '300px',
              minWidth: '300px',
              overflow: 'hidden',
              margin: '0',
            }}
            className="ns-horizontal-section__item__fig"
          >
            <img
              style={{
                transform: 'scale(1.5)',
                width: '100%',
                height: '100%',
                objectFit: 'cover',
              }}
              src="https://images.unsplash.com/photo-1487260211189-670c54da558d?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687"
              alt="react nice scroll"
            />
          </figure>
        </div>
      </HorizontalSection>
      <section
        style={{
          height: '100vh',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <h1>Hello World!!!</h1>
      </section>
    </ScrollContainer>
  );
};

export default Index;

note

One of the best animations for the horizontal scroll is the parallax image on X-axis. So just import parallaxAnimation. import { ScrollContainer, parallaxAnimation } from 'react-nice-scroll';

Add custom animation by gsap like the above approach.

Animate Content in Horizontal Sections Demo

Check demo.