GSAP Mistakes - 2편

Not using xPercent & yPercent 

특정 offset으로 element 의 중심을 맞추고 싶을 때, {xPercent: -50, yPercent: -50, x: 100, y: 300}으로 맞출 수 있다. 

x, y에도 percent value를 쓰지만 이건 나중에 혼동을 일으킬 수 있다. 

percentage-based translation 을 쓰려고 할 때 xPercent나 yPercent를 쓰는 것이 더 좋다. 

 

Recreating animations over and over

Tweens & timeline을 미리 만들어 놓는 것은 여러가지 장점이 있다. 

Performance 측면에서 필요할 떄 바로 만드는 것보다, 미리 만들어 놓으면, animation instance가 더 적게 필요하기 때문에 좋다. 

user interaction events와 관계되어 있을 때 특히나 더 좋다. 

-> 보통 animation을 먄들어 놓게 되면, 필요해질때까지 paused 시키고 싶을 것이다. 그럴 떄 play state를 관리하기 위해서 play, pause, reverse, progress, seek, restart, timeScale을 사용하면 된다. 

 

exception이 있다면, dynamic 한 애니메이션에 한해서, 예를 들면 initial values 이 변할 때, 매번 animation을 만드는 것이 낫다는 것이다. 

 

Adding tweens to completed timelines 

const tl = gsap.timeline()
tl.to(myElem, { x: 100 });

myElem.addEventListener("click", () => tl.to(myElem, { x: 300 }) );

이미 끝난 timeline에다가 click할때마다 추가를 하는 것은 timeline을 re run 하지 않는 이상 실행되지 않는다. 

이렇게하려면, control methods를 쓰거나, 매번 새로운 animation을  생성해야한다. 

 

Not using loops

여러개의 element에 동일한 효과를 주고 싶을 때, 보통 loop를 사용해야할 것이다. 

loop안에서는 해당 element scope안에있는 selector를 사용해야한다. 

gsap.utils.toArray(".container").forEach(container => {
  let info = container.querySelector(".information"),
      silhouette = container.querySelector(".silhouette .cover"),
      tl = gsap.timeline({ paused: true });
  
  tl.to(info, { yPercent: 0 })
    .to(silhouette, { opacity: 0 }, 0);
  
  container.addEventListener("mouseenter", () => tl.play() );
  container.addEventListener("mouseleave", () => tl.reverse() );
});

 

To Study 

Animation Efficiently 를 위해서는 이 글을 참고하면 된다.: https://css-tricks.com/tips-for-writing-animation-code-efficiently/