Gelly Element

Wrap content in <GellyElement></GellyElement>:

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

const Index = () => {
  return (
    <ScrollContainer>
      <section
        style={{
          height: '300vh',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <GellyElement>
          <div style={{ height: '300px', width: '300px', backgroundColor: '#000' }} />
        </GellyElement>
      </section>
    </ScrollContainer>
  );
};

export default Index;

Demo

Check demo.

GellyElement Props

Props	Value Type	Default Value
intensity	number	-400
min	number	-40
max	number	40
trigger	gsap.DOMTarget | string | undefined	undefined
start	string	top bottom
end	string	bottom top
axis	skewX | skewY	skewY
duration	number	0.3
ease	string	expo.out