【React + gsap】でモーダルを作る！

// モーダルのコントローラー：ロジック部分

import gsap from "gsap/all";
import Renderer from "./Renderer";

export default class Controller {
constructor() {
    // dom
    this.openbtn = document.querySelector(".js-modal_openbtn");
    this.modal = document.querySelector(".js-modal");
    this.closebtn = this.modal.querySelector(".js-modal_closebtn");

　　 // init
    this.setup();
    this.setEvents();
  }

  setup() {
    this.renderer = new Renderer(this.modal);
  }

　setEvents() { 
    this.openbtn.addEventListener("click", () => { this.open(); }); 
    this.closebtn.addEventListener("click", () => { this.close(); }); 
  }

  open() {
    if (this.tl) this.tl.kill(); 
    this.modal.classList.add("isActive"); // ★

    this.tl = gsap.timeline();
    this.tl.add(this.renderer.open());
  }

  close() {
    if (this.tl) this.tl.kill();
    this.modal.classList.remove("isActive");  // ★

    this.tl = gsap.timeline();
    this.tl.add(this.renderer.close());
  }
}

// モーダルのレンダラー：演出・表現部分

import gsap from "gsap/all";

export default class Renderer {
  constructor(modal) {
    this.bg = modal.querySelector(".js-modal_bg");
    this.contents = modal.querySelector(".js-modal_contents");
  }

  open() {
    const tl = gsap.timeline();

    tl
    // bg
    .to(this.bg, 0.5, {
      opacity: 1,
      ease: "expo.out"
    })
    // contents
    .to(
      this.contents, 0.5, {
      opacity: 1,
      ease: "expo.out"
    },0.2);

    return tl;
  }

  close() {
    const tl = gsap.timeline();

    tl
    // bg
    .to(this.bg, 0.5, {
      opacity: 0,
      ease: "expo.out"
    })
    // contents
    .to(
      this.contents, 0.5, {
       opacity: 0,
       ease: "expo.out"
    }, 0.2);

    return tl;
  }
}

import style from "../../style/pages/top/top.module.scss";
import { useState } from "react";
import { Button } from "../../components/Button";
import { Modal } from "./Modal/Modal";

export const Top = () => {
   // ①モーダルの状態を用意
　　const [isOpen, setModalStatus] = useState(false);　

   // ②クリックでstate(isOpen)をtrueに
　　const onClick = () => {
　　　　setModalStatus(true);　
　　};

　　return (
  　　<>
    　　<div className={style.wrap}>
      　　<div className={style.inner}>
        　　<div className={style.btnwrap} onClick={onClick}>
          　　<Button>Open</Button>
        　　</div>
      　　</div>
    　　</div>
    　　<Modal isOpen={isOpen} setModalStatus={setModalStatus} />
  　　</>
  );
};

// モーダル：ロジック部分

import style from "../../../style/pages/top/modal.module.scss";
import gsap from "gsap/all";
import classNames from "classnames";
import Renderer from "./Renderer";
import { useEffect, useRef } from "react";
import { Button } from "../../../components/Button";

export const Modal = (props) => {
  // ①propsで親から送られてきた値を取得
  const { isOpen, setModalStatus } = props;

  // ②諸々取得
  const modal = useRef(null); // - modal用意
  const tl = useRef(gsap.timeline());　// - tl用意
  const renderer = useRef(null);　// - renderer用意

  // ③rendererを用意（演出・表現部分）
  useEffect(() => {
    renderer.current = new Renderer(modal.current); 
  }, []);

  // ④isOpenに変化があるたびに以下が発火
　//   フラグで発火内容を出し分け
  useEffect(() => { 
    if (isOpen) {
      open();
    } else {
      close();
    }
  }, [isOpen]);

　// ⑤閉じるボタンを押すと、state（isOpen）をfalseにする
  //  そのあとは④が発火
  const onClick = () => { 
   setModalStatus(false);
  };

　// ⑥openとclose用意
  const open = () => {
    tl.current.kill();
    tl.current = gsap.timeline();

    tl.current.add(renderer.current.open());
  };

  const close = () => {
    tl.current.kill();
    tl.current = gsap.timeline();

    tl.current.add(renderer.current.close());
  };

  return (
    <>
      <div
        className={style.modal}
        ref={modal}
        style={isOpen && styles.isActive}
      >
        <div className={classNames([style.bg, "js-modal_bg"])}></div>
        <div className={classNames([style.contents, "js-modal_contents"])}>
          <div className={style.contentsInner}>
            <p className={style.contentsText}>モーダルです</p>
            <div className={style.btnwrap} onClick={onClick}>
              <Button>Close</Button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

const tl = useRef(gsap.timeline());

const renderer = useRef(null);

useEffect(() => { r
  renderer.current = new Renderer(modal.current); 
}, []);

useEffect(() => { 
  if (isOpen) { open(); } else { close(); } 
}, [isOpen]);