Creative

느린 인터넷 환경에서, 화면 요소 모두 로드되기 전 요소들이 먼저 보이는 걸 방지하려면?

1. css로 전체 판을 visibility:hidden;
2. init 함수를 만들어, [window.addEventListener(“load” … ]로 모두 준비된 다음 timeline이 실행되도록 함
3. 전체 판에 from 속성으로 ‘autoAlpha:0’를 설정, visibility가 inherit, opacity가 1로 변화되도록 만든다

var tl = gsap.timeline({defaults:{opacity:0, ease:"back"}});
function init() {
	tl.from("#demo", {ease:"linear", delay:0.5, autoAlpha:0}) /* AutoAlpha Plugin will toggle visibility and fade opacity */
	  .from("#demo h1", {x:80, duration:1})
	  .from("#demo h3", {x:-80, duration:1}, "-=1")
	  .from("#demo h6", {})
	  .from("#demo .w-btn-wrapper", {y:50})
	  .from("#demo-right .w-iconbox", {
		transformOrigin:"50% 50%",
		scale:0,														
		stagger:0.1,
	});
}
// Remove Flash of Un-styled Content (FOUC) 1. css visibility -> 2. from autoAlpha
window.addEventListener("load", function(event) { 
    init(); //do stuff				  
});