Avoiding FOUC & GSAP Mistakes 정리

https://gsap.com/resources/fouc/  

Avoiding FOUC 

Javascript 가 실행되기 전에 브라우저가 ASAP 렌더링 하기 때문에 initial style을 javascript 로 설정하는 경우, unstyled content가 눈에 띄게 된다. 

solution: visibility:hidden으로 세팅을 해놓고, autoAlpha property를 사용하자. autoAlpha 는 opacity 와 visibility에 영향을 끼치지 때문에, opacity가 0보다 크게 되면, visible하게 변하게 된다. 

 

autoalpha는 opacity와 동일한데, 만약에 0이면, visibility property가 hidden이 되는 것이다. visibility property 를 hidden으로 함으로써 click& interactivity 를 막고 rendering performance를 향상시킬 수 있다. visibility will be set to inherit otherwise. 

 

 

https://gsap.com/resources/mistakes/ 

from () 을 사용하면서 restart 를 하게되면서 생기는 실수 

from은 provided value to the current value 이다. 만약에 0 -> 1로 가는 도중 restart 를 한다면, 0 -> 0.5 같은 1보다 작은 value로 가게 된다.

 

 

쉽게 예상하지 못하는 동작 

 immediateRender is true by default for .from() & .fromTo() -> from()을 to() tween 다음에 생성한다면? 

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

 

to 자체는 playhead가 시작하고 나서 움직인다. 그렇기 때문에 immediateRender: ture인 from부터 동작하게 되고, 그 뒤의 next tick 에서 .to()가 0.5초 동안 (by default, duration = 0.5s) 실행되게 된다. 그래서 100 -> 100 으로 움직이게 되고, 그 뒤에 .from() tween이 cached value 인 0을 end value 로 동작하게 된다. 

Simple solution :  to tween의 immediateRender 를 true로 하거나, 아니면 반대로 from tween의 immediateRender를 false 로 하거나 이다. 

 

RepeatRefresh를 사용하는 법

const tl = gsap.timeline({repeat:-1, repeatRefresh: true}), 
    split = new SplitText(".quote", { type: "chars, words" }),
    chars = split.chars;

tl.set(chars, { color: "random([#6fb936, #f38630, #989898, pink])" }, 2); 

tl.from(chars, { 
  opacity: 0,
  duration: .1, 
  stagger: .1,
});

tl.to(chars, {
  duration: .5, 
  opacity: 0, 
  stagger: 0.05,
  ease: "power4.inOut",
});

동작을 예상하면 0 -> 1 -> 0 이 되어야 하는데, 실제로는 두번째부터는 repeatRefersh 를 하게 되면, 마지막에 끝난 value를 end value라고 생각해서 0 -> 0 -> 0 이 되어서 보이지 않게 된다. 

 

Solution : from 을 쓰는 대신 fromTo를 쓰게 되면 이 것을 해결할 수 있다. 하지만, fromTo가 필요없을 때 쓰지 말자. performance, maintanability, 그리고 ease to use 측면에서 고려했을 때 from, to가 좋다. 

 

 

 

 

 

To study 

• 예제로 나온 https://gsap.com/docs/v3/Plugins/SplitText/ 
• https://gsap.com/resources/mistakes/#not-using-xpercent-and-ypercent 여기서부터는 다음 게시글!