Sequence Section

import { ScrollContainer, SequenceSection } 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>
      <SequenceSection end="300%" imagesPath="/img" imagesCount={80} imagesType="jpg" />
      <section
        style={{
          height: '100vh',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <h1>Hello World!!</h1>
      </section>
    </ScrollContainer>
  );
};

export default Index;

SequenceSection Props

Props	Value Type	Default Value
imagesPath	string	required
imagesType	string	required
imagesCount	number	required
start	string	top top
end	string	200%

tip

Images naming convention must be like this: (1.jpg, 2.jpg, 3.jpg... 80.jpg)

note

How make an image sequence? With any 3D animation software(like Blender) make an animation and then export each frame of animation as an image.

SequenceSection Demo

Check demo.