@lasbe/react-scroll-animation

손쉽게 스크롤 애니메이션을 구현할 수 있는 리액트 컴포넌트 패키지입니다.
Github Repository
NPM
CodeSandbox 사용 예제

install

$ npm i @lasbe/react-scroll-animation

<ScrollAnimation /> Props

Name	Value	Default Value	description
startingPoint	'top' or 'right' or 'bottom' or 'left'	'top'	애니메이션 시작 지점입니다.
duration	number	0.5	애니메이션 지속시간입니다. 단위는 '초'이며 0보다 작을 수 없습니다.
amount	sm or md or lg or xl	md	애니메이션 움직임의 양입니다.
delay	number	0	스크롤 감지 후 애니메이션 실행 지연시간입니다. 단위는 '초'이며 0보다 작을 수 없습니다.
repeat	boolean	false	범위를 벗어났을 때 애니메이션 재적용 여부입니다.

사용 방법

ScrollAnimation을 감싸주기만 하면 감싸진 요소가 사용자 화면 안에 들어올 때 애니메이션이 트리거 됩니다.

import { ScrollAnimation } from '@lasbe/react-scroll-animation';

function App() {
  return (
    <div>
      <ScrollAnimation>
        <div>요소1</div>
      </ScrollAnimation>
      <ScrollAnimation startingPoint="right" amount={300} duration={1} delay={1} repeat={true}>
        <div>요소2</div>
      </ScrollAnimation>
    </div>
  );
}

export default App;

Release Note

v1

• styled-component를 이용해 감싼 컨테이너로 애니메이션 적용

v2

• styled-component 의존성을 제거하고 css로 동작.
• React.cloneElement를 이용해 감싸진 컴포넌트가 기존 애니메이션 컨테이너에 의해 스타일링이 망가지는 문제 해결
• 애니메이션 움직임 양을 조절하는 props인 amount 타입이 number -> 문자열 유니온 타입으로 변경

---

@lasbe/react-scroll-animation(EN)

This is a React component package that makes it easy to implement scroll animations.
Github Repository
NPM
CodeSandbox Example Usage

install

$ npm i @lasbe/react-scroll-animation

<ScrollAnimation /> Props

Name	Value	Default Value	Description
startingPoint	'top' or 'right' or 'bottom' or 'left'	'top'	The starting point of the animation.
duration	number	0.5	The duration of the animation in seconds, cannot be less than 0.
amount	sm or md or lg or xl	md	The amount of animation movement.
delay	number	0	The delay before the animation starts after scroll detection, in seconds, cannot be less than 0.
repeat	boolean	false	Whether the animation reapplies when it goes out of range.

How to Use

Simply wrap ScrollAnimation around the element, and the animation will be triggered when the wrapped element enters the user's screen.

import { ScrollAnimation } from '@lasbe/react-scroll-animation';

function App() {
  return (
    <div>
      <ScrollAnimation>
        <div>Element 1</div>
      </ScrollAnimation>
      <ScrollAnimation startingPoint="right" amount={300} duration={1} delay={1} repeat={true}>
        <div>Element 2</div>
      </ScrollAnimation>
    </div>
  );
}

export default App;

Release Note

v1

• Apply animation via a container wrapped with styled-component.

v2

• Removed dependency on styled-component and operates with CSS.
• Solved the issue where the wrapped component's styling is disrupted by the original animation container using React.cloneElement.
• The amount prop that adjusts the amount of animation movement has changed from number to a union type of strings.