3. 기본 UI 만들기(3) - [ react-animation-on-scroll ] 스크롤 애니메이션 - 스크롤하면 보이는 애니메이션 만들기

스크롤하다, 보이면 애니메이션이 나오는 페이지를 만들어보자

 

기가막힌 패키지이다.

  React-animation-on-scroll  

 https://github.com/MetinArslanturk/react-animation-on-scroll

GitHub - MetinArslanturk/react-animation-on-scroll: A react library to animate elements on scroll. It has integration with anima

https://animate.style/

Animate.css | A cross-browser library of CSS animations.

react-animation-on-scroll : https://github.com/MetinArslanturk/react-animation-on-scroll
Animate.css :   https://animate.style/

npm install react-animation-on-scroll --save
npm install --save animate.css

 

DOCS 에 아주 잘 소개되어 있고, 사용 방법이 너무나 간단하다.

 

기본 사용

      import { AnimationOnScroll } from "react-animation-on-scroll";
        import "animate.css/animate.min.css";

        const Component = ()=>{
                ...
            return(
                        ...
                <AnimationOnScroll animateIn="animate__fadeIn" duration={3}>
                    <img src="/mainpage/section1-desc-img.jpg" alt={"description"} />
                </AnimationOnScroll>
                        ...
                )
        }

 

옵션

1. offset - default 150
    : The "viewport" is by default 150 pixels from the top and bottom of the screen. When part of an element is within the "viewport", animateIn is triggered. When no part of the element is in the "viewport", animateOut is triggered. This size of the "viewport" can be overridden by setting the offset property.

2. animateIn
    : Any css animation defined against a class, be it from animate.css or an animation that you have created yourself. The Animation triggers when the element enters the "viewport" (see offset property for more details on this).

3. animateOut
    : Any css animation defined against a class, be it from animate.css or an animation that you have created yourself. The Animation triggers when the element is leaving the "viewport" (see offset property for more details on this).

4. duration - default 1
    :  Animation duration in seconds.

5. initiallyVisible - default false
    : Whether the element should be visible to begin with or not. Recomending to set true if you have got server-side rendering.

6. delay - default 0
    : How long to delay the animation for (in milliseconds) once it enters or leaves the view.

7. animateOnce - default false
    : Whether the element should only animate once or not.

8. style - default {}
    : A style object can be assigned to any ScrollAnimation component and will be passed to the rendered dom element. Its probably best to avoid manually setting animationDuration or opacity as the component will modify those attributes.

9. scrollableParentSelector
    : By default the code checks to see if the element is visible within the window. This can be changed to any other parent element of the ScrollAnimation by adding a css selector pointing to the parent that you wish to use.

10. afterAnimatedIn
    : Callback function to run once the animateIn animation has completed. Receives the visibility of the element at time of execution. Example:

* 물론 전부 DOCS 에 있는 내용들이다.

 

애니메이션의 선택

https://animate.style/

Animate.css | A cross-browser library of CSS animations.

여기서 고르면 된다.

 

[예시]

        <AnimationOnScroll animateIn="animate__fadeIn" duration={3}>
            <h2> 이게 흔들린다! </h2>
        </AnimationOnScroll>

** animateIn="animate__fadeIn"  
    => fadeIn 애니메이션을 사용하겠다는 말이다.

    https://animate.style/

사이트에 접속하면, 우측에, 애니메이션 이름이 쭉 나온다. 원하는 것을 골라 쓰도록 한다.

    <AnimationOnScroll animateIn="animate__slideInDown" duration={1} delay={300}>
    <AnimationOnScroll animateIn="animate__zoomOutLeft" duration={0.5}>
    <AnimationOnScroll animateIn="animate__rotateOut" duration={3}>
            ...


** animateOut 을 통해, 사라지는 것도 표현 가능하다. 방법은 똑같다.