gsap 연습

[alissa1228]

• https://greensock.com/react#setup 참고해서 진행 중. 하나씩 해보기.

[alissa1228]

*Targeting elements (엘리먼트 지정) : gsap 애니메이션을 사용하려면 DOM에 있는 엘리먼트에 접근해야함. Refs는 React 구성 요소의 DOM 노드와 상호 작용하고 레퍼런스들을 저장한다.(In order to animate using GSAP we need access to the element in the DOM. Refs provide a way for us to interact with and store references to DOM nodes in a React component.)

[alissa1228]

*Creating our first animation (첫번째 우리의 애니메이션 만들어보기~!) :gsap는 인라인 스타일 프로퍼티를 업데이트 한다. 그래서 애니메이션을 만들기 전에 DOM이 렌더링되었는지 확인하는 것이 중요하다. 만약 렌더링 되지 않은 엘리멘트를 애니메이션으로 만들어달라고 gsap한테 말하면, 콘솔에 gsap 타겟이 없다고 뜬다(=GSAP target not found.). null 값이 있는 엘리먼스를 피하기 위해서 우리는 useEffect 훅을 사용한다. 이 훅은 리엑트에게 우리 컴포넌트가 렌더링 후에 뭔가를 해야한다고 말해준다.

GSAP updates inline style properties, so it’s important to make sure the DOM has been rendered before trying to animate anything. If we ask GSAP to animate an element that hasn’t been rendered, we’ll get this warning in the console. 'GSAP target not found. 'In order to avoid targeting a null element, we can use the useEffect hook. This hook tells React that our component needs to do something after rendering.

[alissa1228]

*Targeting descendant elements(자식 요소들 지정)

• [gsap.utils.selector()](https://greensock.com/docs/v3/GSAP/UtilityMethods/selector()%3E)
• 우리가 애니메이트를 넣고 싶은 각각 그리고 모든 엘리먼트들에 ref를 만들면 코드에 큰 문제가 생긴다..하지만 피할 수 있지< gsap의 selector utility를 만들어서 사용하면 쉽게 자식 요소들을 선택할 수 있다.

ex)

const el = useRef();
const q = gsap.utils.selector(el);

useEffect(() => {
   // Target ALL descendants with the class of .box
  gsap.to(q(".box"), { x: 100 });
}, []);

Creating a ref for each and every element we want to animate can add a lot of noise to our code. We can avoid this by making use of GSAP’s selector utility to easily select descendant elements.

[alissa1228]

*Forwarding refs

• gsap.utils.selector()는 컴포넌트 트리의 모든 자식들을 타겟으로 삼는다. (하지만!) 컴포넌트 시스템 안에서 엘리먼트에 대한 세밀한 제어가 필요 할 수 있다. 이 때 refs 전달을 사용하여 중첩된 특정 요소에 액세스할 수 있다.

+) forwardRef : React 컴포넌트에 ref prop을 넘겨서 그 내부에 있는 HTML 엘리먼트에 접근을 하게 해주는 함수

gsap.utils.selector() will target all descendants in the component tree. Within a component based system, you may need more granular control over the elements you're targeting. You can use ref forwarding to get access to specific nested elements.

[alissa1228]

*Creating and controlling timelines

• 지금까지 단순히 refs를 DOM 엘리먼트에 대한 레퍼런스를 저장하기 위해 썼지만, refs는 엘리멘트만을 위한게 아니다. Refs 렌더 루프의 바깥에 존재한다. 그래서 refs는 우리가 컴포넌트 주기동안 유지하고 싶은 값을 저장하는데 쓰일 수 있다. 만약 class 컴포넌트를 사용하는 거라면, 익숙할건데, 이건 'this'를 사용하는 것과 같기 때문이다.
• 모든 렌더에서 새로운 타임라인을 만들지 않으려면, effect 안에 타임라인을 만들고 이걸 ref에 담는 게 중요하다.

Up until now we've just used refs to store references to DOM elements, but they're not just for elements. Refs exists outside of the render loop - so they can be used to store any value that you would like to persist for the life of a component. If you're coming from class based components, this should be familiar to you as it’s essentially the same as using ‘this’.

In order to avoid creating a new timeline on every render, it's important to create the timeline inside an effect and store it in a ref.

[alissa1228]

*Controlling when React runs our animation. (react가 우리 애니메이션을 실행할 때의 컨트롤)

• useEffect는 기본적으로 첫번째 렌더와 모든 업데이트 후에 실행된다. 그래서 컴포넌트들의 상태가 바귈 때마다, 리렌터가 발생해 다시 effect가 다시 실행된다.
• 우리는 dependencies 배열을 전달해 useEffect가 실행되는 시기를 컨트롤 할 수 있다. 첫번째 렌더 후에만 실행하게 하고 싶다면 빈 배열을 넣어주면 된다.

By default useEffect runs both after the first render and after every update. So every time our component’s state changes, it will cause a re-render, which will run our effect again. We can control when useEffect should run by passing in an array of dependencies. To only run once after the first render, we pass in an empty array.

[alissa1228]

*Reacting to changes in state

• 이제 effect 발생 시기를 어떻게 컨트롤하는지 알았으니, 우리는 이제 이 패턴을 사용해 컴포넌트 안에서 리액트 변화에 대응할 수 있다. 이 패턴은 props를 내릴 때 유용하다.

Now that we know how to control when an effect fires, we can use this pattern to react to changes in our component. This is especially useful when passing down props.

[alissa1228]

*Animating on interaction (상호작용 애니메이션) hover와 같은 사용자 상호 작용에 연결하기 위해 콜백을 사용할 수 있다. (In order to hook into user interactions like hover, we can use callbacks.)

[alissa1228]

*Avoiding flash of unstyled content (FOUC) (다 그려지기 전에 스타일이 적용되지 않은 콘텐츠가 나오면서 번쩍거리는 현상)

• DOM이 출력되고 useEffect가 실행될 때, 엘리멘트가 희미해지면서 스타일이 적용되지 않은 원하지 않은 번쩍임이 보일 수 있다.
• 이런 번쩍임을 피하기 위해서는 우리는 useEffect 대신 useLayoutEffect를 쓸 수 있다. useLayoutEffect 함수는 useEffect와 같지만 DOM이 출력되기 전에 실행됩니다.
• useLayoutEffect는 DOM 측정을 해야할 때 특히 효율적이며, gsap의 ScrollTrigger와 FLIP 플러그인을 사용할 때 더더욱 추천합니다.

As useEffect fires after the DOM has been painted, when fading in elements you may notice an undesired flash of unstyled content. In order to avoid the flash, we can replace useEffect with useLayoutEffect. useLayoutEffect functions exactly the same as useEffect, but runs before the DOM has been painted.

useLayoutEffect is especially useful when you need to make DOM measurements, so we highly recommend it when using our ScrollTrigger and FLIP plugins.

More information about useEffect vs useLayoutEffect.

[alissa1228]

*Cleaning Up

• 이벤트 리스너와 같이 실행 중인 애니메이션이나 메모리 누출을 유발할 수 있는 모든 것을 제거하기 위해 효과의 정리 기능을 반환하는 것이 좋다. 이건 만약 애니메이션이 매우 긴 시간동안 돌아갈 때, scrollTrigger를 쓰거나 컴포넌트 상태를 변경할 때 특히 중요하다.

It’s a good idea to return a cleanup function in your effects to kill off any running animations and anything else that could cause a memory leak, like an event listener. This is particularly important if an animation runs for a really long time, makes use of ScrollTrigger, or changes the state in a component.