[해피CGI][cgimall] Loader - Splitting.js

 Splitting.js를 사용하여 로딩하는 애니메이션 입니다.
코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다.

HTML 소스

<p data-splitting>Loading ....</p>
   <div class="wrap">
      <div class="vertical-flip" data-splitting="cells" data-columns="10" data-rows="1" data-image="true">
   </div>
</div>

CSS 소스

.vertical-flip {
   width: 10rem;
   height: 1rem;
   margin-block-start: 0.5rem;
   background: dodgerblue;
}

.wrap {
   outline: 1px solid #efefef;
   outline-offset: 0.25rem;
}

p {
   opacity: 0.5;
}

body {
   display: grid;
   place-items: center;
   min-height: 100vh;
   background: #080808;
   font-family: "Open Sans", sans-serif;
   color: #fff;
}

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

 

JS 소스

Splitting();
var tl = gsap.timeline({ repeat: -1, repeatDelay: 0.75 });
tl
   .from(".vertical-flip .cell", {
      scale: 0,
      transformOrigin: "center",
      x: "1.5rem",
      duration: 0.25,
      ease: "circ.out",
      stagger: {
         amount: 3,
         from: "start"
      }
   })
   .to(
      ".vertical-flip .cell",
   {
      scale: 0,
      xPercent: -900,
      duration: 0.5,
      stagger: { amount: 0.75, from: "start" }
   },
   "+=0.5"
);