framed-animation-on-scroll

framed-animation-on-scroll

This is a framed animation on scroll library for React.
Motivated by iPhone 12 pro page

Core

ContentsWrapper makes your component be able to measure scroll progress in the section by useScrollProgress. It calculates scroll progress that how deep your component is in section. You can make framed-animation by the progress. And also you can control the progress range for animation by getWeightByProgress.

How it works

• Detect the viewport is in a section.
• Measure the progress of scroll in a section with a threshold value.
• Make an interaction in the progress range you want.

Update Notes

• v1.1.2
  • Add fixed-point(6) of progress, weight value
• v1.1.1
  • Remove function that automatically resize height of ContentWrapper
  • Fix 'undefined ref' error of useScrollProgress
• v1.1.0 - Update ContentWrapper
  • Add props(isSticky, contentHeight)
  • Improve inner structure
  • Change default value of height prop ("100%" to "120vh")

Use

ContentsWrapper

: It's necessary to get customized Ref(type: ContentsWrapperRefTypes) for using useScrollProgress.

Attribute	Description	Type	Default value
ref	Ref	MutableRefObject<ContentsWrapperRefTypes>	NOT_NULL
height	The height of wrapper	string | undefined	"120vh"
bgColor	The background color of ContentsWrapper component	string | undefined	"black"
isSticky	The boolean value whether the content is sticky or not	boolean | undefined	true
contentHeight	The height of content in wrapper	string | undefined	"100vh"

useScrollProgress

: It handles scroll event listener. It's for calculating the progress by how deep scroll is in a section with a threshold value.

Attribute	Description	Type	Default value
ref	Ref	MutableRefObject<ContentsWrapperRefTypes>	NOT_NULL
threshold	Specifying a ratio of intersection area to total bounding box area for the observed target	number(0~1) | undefined	0.5

getWeightByProgress

: It's for calculating the weight value that you can use at interaction value(e.g: opacity value of css) by the progress range you want.

Attribute	Description	Type	Default value
start	The start point of progress that you want	number	NOT_NULL
end	The endpoint of progress that you want	number	NOT_NULL
progress	The progress value from useScrollProgress	number	NOT_NULL
min	The minimum weight value you want	number | undefined	0
max	The maximum weight value you want	number | undefined	1

Usage

import { useEffect, useRef, useState } from 'react';
import { ContentsWrapper, getWeightByProgress, useScrollProgress } from 'framed-animation-on-scroll';

function App() {
  const ref = useRef();
  const [progress] = useScrollProgress(ref, 0);

  const [opacityValue, setOpacityValue] = useState(0);

  useEffect(() => {
    //in 10~30% progress, opacity value will change 0.5 to 1
    setOpacityValue(getWeightByProgress(10, 30, progress, 0.5, 1).toFixed(3));
  }, [progress])
  return (
    <div className="App">
      <div style={{ position: "fixed", top: 0, left: 0, color: "white", zIndex: 999, fontSize: "30px" }}>Scroll progress in black section: {progress} %</div>

      <div style={{ height: "100vh", width: "100%", background: "gray" }} />

      {/* Usage */}
      <ContentsWrapper
        height="200vh"
        ref={ref}
      >
        <div
          style={{
            width: 300, height: 300, padding: 20, margin: 50, background: "green", color: "white", fontSize: "20px",
            opacity: opacityValue
          }}
        >
          <p>sticky contents</p>
          <p>in 10~30% progress, opacity value will change 0.5 to 1</p>
          <p>value: {opacityValue}</p>
        </div>
      </ContentsWrapper>

      <div style={{ height: "100vh", width: "100%", background: "gray" }} />
    </div>
  );
}

export default App;

Demo

Demo page

License

This project is licensed under the terms of the MIT license.