Beta

Animated Video Section

Gallery section with text, and staggred grid images, and cta button.

Delivering Exceptional

Digital Experiences

Installation

Usage

<ContainerScrollAnimation className="row-start-1 col-start-2 row-end-3 col-end-12">
  <ContainerScrollTranslate className="flex items-center justify-center">
    <ContainerScrollInset
      className="overflow-hidden w-full flex justify-center items-center"
      insetRangeY={[10, 0]}
      insetXRange={[27, 0]}
      roundednessRange={[1000, 16]}
    >
      <ContainerScrollScale scaleRange={[2, 1]}>
        <video
          width="100%"
          height="100%"
          loop
          playsInline
          autoPlay
          muted
          className="block h-auto max-h-full max-w-full object-contain align-middle"
        >
          <source
            src="https://videos.pexels.com/video-files/2235742/2235742-hd_1280_720_30fps.mp4"
            type="video/mp4"
          />
        </video>
      </ContainerScrollScale>
    </ContainerScrollInset>
  </ContainerScrollTranslate>
</ContainerScrollAnimation>

Props

ContainerScrollAnimation

PropTypeDefault
spacerClass?
string
-

ContainerScrollTranslate

PropTypeDefault
yRange?
number[]
[0, 384]
inputRange?
number[]
[0, 1]

ContainerScrollInset

PropTypeDefault
insetRange?
number[]
[48, 0]
inputRange?
number[]
[0, 1]

ContainerScrollScale

PropTypeDefault
yRange?
number[]
[1.2, 1]
inputRange?
number[]
[0, 1]