Solid + GSAP: 우리에게 필요한 슈퍼히어로

페이지를 만들었는데 SAUCE가 부족하다고 느낀 적이 있습니까? 내 생각에 그 드립은 일반적으로 마이크로 인터랙션(유저를 기쁘게 하기 위한 유일한 목적의 작은 인터랙션)에서 비롯됩니다. 애니메이션을 만들 수 있는 라이브러리가 많이 있지만 제가 가장 좋아하는 라이브러리는 고성능의 복잡한 애니메이션을 쉽게 만들 수 있는 GSAP입니다.

그러나 React와 함께 GSAP를 사용할 때 통합이 적절하지 않은 것 같습니다. Tween/Timeline을 만들어 React.useRef()에 저장하고, .to() 안에 .from() 및 React.useEffect()를 추가하면 이상하게 보입니다. 나. 이는 DOM 트리에서 무언가가 변경될 때마다 애니메이션을 다시 트리거하는 모든 렌더링에서 재선언을 방지하기 위해 필요합니다.

SolidJS가 작동하는 곳입니다. React와 비슷해 보이지만 주요 차이점이 있습니다. 그것의 documentation에 따르면 :

Every Component executes once and it is the Hooks and bindings that execute many times as their dependencies update.

이는 타임라인을 저장하는 데 필요하지 않음useRef을 의미합니다. Solid에서는 간단히 다음과 같이 선언할 수 있습니다.

const tl = gsap.timeline({paused: true});

그리고 렌더링할 때마다 다시 선언되지 않습니다. 아주 멋지죠? 이 접근 방식은 전환 및 애니메이션을 추가하기 위해 DOM과 상호 작용하는 대부분의 라이브러리에 유용합니다(예: ScrollReveal.js ).

Solid.js에서 GSAP를 사용한 애니메이션

타임라인에 애니메이션을 추가할 때 GSAP는 애니메이션을 적용해야 하는 요소를 알아야 합니다. 이는 요소 참조를 사용하여 수행할 수 있습니다. Solid에서 ref를 얻는 방법에는 두 가지가 있습니다.

ref 변수를 JSX 요소에 전달하고 내부에 애니메이션을 추가합니다onMount.

  let containerRef;
  onMount(() => {
    gsap.to(containerRef, {
      // TODO: animation
    });
  });
  return <div ref={containerRef} />;

또는 사용자 지정 지시문을 사용하는 가장 좋아하는 방법:

const animation = (element) => {
  // code goes here
};

return <div use:animation />;

사용자 지정 지시어는 ref보다 구문 설탕이므로 단일 요소에 여러 지시어를 쉽게 연결할 수 있습니다. 지시문은 다음과 같이 요소와 접근자를 인수로 받는 함수입니다.

const hoverAnimation = (el, _accessor) => {
  const animation = gsap.to(el, {
    // properties
  });

  el.addEventListener("mouseenter", () => {
    animation.play();
  });

  el.addEventListener("mouseleave", () => {
    animation.pause();
  });
};

그런 다음 다음과 같은 요소에 추가할 수 있습니다.

const App () => (
  <div use:hoverAnimation />
  <div use:hoverAnimation />
);

요소에는 여러 지시문이 있을 수 있으며 지시문은 여러 요소에서 사용될 수 있으므로 앱 전체에서 재사용할 수 있는 GSAP 애니메이션을 만들 수 있습니다.

호버에서 배경색을 변경하는 개체의 라이브 데모를 확인하십시오.