2.0.2 • Published 3 months ago
@lasbe/react-scroll-animation v2.0.2
@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.
2.0.2
3 months ago
2.0.1
3 months ago
2.0.0
3 months ago
1.1.5
4 months ago
1.1.4
4 months ago
1.1.3
4 months ago
1.1.1
4 months ago
1.1.0
4 months ago
1.1.2
4 months ago
1.0.3
4 months ago
1.0.2
5 months ago
1.0.1
5 months ago
1.0.0
5 months ago
0.1.10
5 months ago
0.1.8
5 months ago
0.1.7
5 months ago
0.1.9
5 months ago
0.1.4
5 months ago
0.1.6
5 months ago
0.1.5
5 months ago
0.1.3
5 months ago
0.1.2
5 months ago
0.1.1
5 months ago
0.1.0
5 months ago