Animated Video Section
Gallery section with text, and staggred grid images, and cta button.
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
Prop | Type | Default |
---|---|---|
spacerClass? | string | - |
ContainerScrollTranslate
Prop | Type | Default |
---|---|---|
yRange? | number[] | [0, 384] |
inputRange? | number[] | [0, 1] |
ContainerScrollInset
Prop | Type | Default |
---|---|---|
insetRange? | number[] | [48, 0] |
inputRange? | number[] | [0, 1] |
ContainerScrollScale
Prop | Type | Default |
---|---|---|
yRange? | number[] | [1.2, 1] |
inputRange? | number[] | [0, 1] |