[React] gsap 과 missing plugin?

이번에는 gsap로 애니메이션을 넣어보려고 한다.

 

공식 홈페이지의 예제를 참고했다.

 

Main.css

.gsap-event {
  opacity: 0;
  visibility: hidden;
}

CSS는 현재 설정한 애니메이션이 알파가 0에서 1로 변경되도록 해야 해서 넣어줬다.

import { TimelineLite, CSSPlugin } from "gsap/all";
const plugin = CSSPlugin;///빌드하고 오류 안생기려면 꼭 넣어줘라!!!

 

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = { gsap: [] }
    this.eventTween = new TimelineLite({ paused: true });
    this.eventContainer = [];
    }
    componentDidMount(){
    	this.eventTween.staggerTo(
      	this.eventContainer,
      	0.5,//지속시간
      	{ autoAlpha: 1, y: -20 },//알파 1로 y는 -20에서 현재 위치로 오는듯?
      	0.1//그냥 to 쓸 때는 없었는데 생겼다.
    	);
    }
    componentDidUpdate() {
    	this.eventTween.play();
  	}
    render() {
    	return(
        	<div>
            		{gsap.map((gsap, index) => (
              			<div
                			key={index}    //있어야 오류가 안남
                			className="gsap-event"    //css때문에 넣음
                			ref={div => (this.eventContainer[index] = div)}
              			>
                			<Component
                  				key={c._id}
                  				id={c._id}
                			/>
              			</div>
            		))}
          	</div>
        );
    }
}

얼추 필요한 것들만 넣어봤다.

일단 tween이라는게 필요하고 container에는 애니메이션 동작을 할 컴포넌트?들을 넣어주면 된다.

 

componentDidMount에서 tween의 애니메이션을 설정해준다.

 

componentUpdate에서 설정한 애니메이션을 play해준다. 여기서 실행해야 화면에서 보인다.

 

render에서 ref를 사용해 컨테이너에 해당 컴포넌트를 넣어줄 수 있다.

배열에 넣어야 하기 때문에 index도 사용했다.

 

이렇게 하면 아래에서 점차 올라오면서 화면에 보여지는 컴포넌트를 볼 수 있을 것이다.

 

참고

missing plugin을 보고싶지 않으면 꼭 CSSPlugin을 사용하자.

쓰지 않아도 한줄 있어야 React를 빌드했을 때 애니메이션이 동작한다.