React-gsap 적용

React components for GSAP

react에 react-gsap 모션 적용하기

react-gsap 설치

npm i -D react-gsap

Tween

import

import { Tween } from 'react-gsap';

Tween 불러오기

Sample code

import React from 'react';
import { Tween } from 'react-gsap';
import img from '../asset/dinor.png';

const Dinor = (props) => {
  // props로 받아와서 speed 설정

  return (
    <>
      <div>
        <Tween
          from={{
            rotationY: 10,
            rotationZ: 10,
            x: 5,
            y: -10,
            scale: 1.1,
            transformOrigin: 'right bottom',
          }}
          duration={props.spd}
          repeat={-1}
          yoyo={true}
        >
          <img src={img} alt="" />
        </Tween>
      </div>
    </>
  );
};

export default Dinor;

yoyo : true일 경우 reverse 트랜지션 실행
from : 설정 값으로 부터 모션 실행
to : 설정 값으로 모션 실행
duration : 모션 속도
repeat : -1 (무한반복)

event

ref 속성을 통해 선택 후 tween 컨트롤

dinorRef.current.tween.restart();

Tiemline

기존 gsap의 stagger timeline 모션 적용

import

import { Timeline } from 'react-gsap';

sample code

<Timeline ref={timeRef}>
  <ul className="profile-emoji" ref={timeTargetRef}>
    {emojiList.map((emo, i) => {
      return (
        // timeline target
        <li key={i} className="emo-list">
          <button onClick={handleChangeEmoji} type="button">
            {emo.emoji}
          </button>
          <span className="emo-name">{emo.name}</span>
        </li>
      );
    })}
  </ul>
</Timeline>

stagger setting

// timeline motion
const doEmojiListMotion = () => {
  let timeTarget = timeTargetRef.current.getElementsByTagName('li');
  timeRef.current.timeline.staggerFrom(
    timeTarget,
    0.7,
    { y: 50, opacity: 0 },
    0.05
  );
};

useEffect(() => {
  loadEmojiList();
  doEmojiListMotion();
}, []);

timeline의 staggerFrom 적용

event

timeRef.current.timeline.restart();

current.timeline 으로 접근하여 컨트롤

example

demo

Reference

Published 18 Oct 2019

ui code labUI-Dev on github