Hello. Can someone tell me how to make a preloader like on uix.me with animation? As I understand animation works for them through JavaScript, with which I have problems. Yes, everything is recompiled, I can not find where my legs grow from. Like all HTML and CSS

codepen

, but I don’t know what to do with JS.

.preloader, .ovly { display: none; position: absolute; text-align: center; height: 100%; width: 100%; align-items: center; justify-content: center; background-color: #fff; z-index: 999; color: #000; text-align: center; height: 100%; width: 100%; align-items: center; justify-content: center; overflow: hidden; } .preloader section, .ovly section { z-index: 1 } .preloader h3, .ovly h3 { display: inline-block; font-size: 3rem; font-family: Sansation-Light; } .preloader section { width: 100%; } .preloader span, .ovly span { display: inline-block } .preloader .p1 span:nth-child(1) { animation: span-1 1s ease-in-out 1; } .preloader .p1 span:nth-child(2) { animation: span-2 3s ease-in-out 1; } .preloader .p1 span:nth-child(3) { animation: span-3 5s ease-in-out 1; } .preloader .p1 span:nth-child(4) { animation: span-4 7s ease-in-out 1; } .preloader .p1 span:nth-child(5) { animation: span-5 9s ease-in-out 1; } @media screen and (max-width:640px) { .preloader span, .ovly span { display: block; margin: 12px 0 } } @media screen and (max-width:640px) { .preloader span.dot { display: none } } @media screen and (max-width:640px) { .preloader span:nth-child(5):after { content: "." } } @media screen and (max-width:640px) { .preloader span:nth-child(6) { color: #eb9e66 } } .preloader.active, .ovly.active { display: flex } .pline { position: absolute; height: 2px; width: 20%; left: 40%; bottom: 20%; background-color: #bbb; -webkit-animation-name: pline; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */ animation-name: pline; animation-duration: 10s; animation-iteration-count: infinite; } @media screen and (max-width:640px) { .pline { width: 50%; left: 25%; bottom: 10% } } .pdisc { width: 100%; position: absolute; left: 0; color: #bbb; position: absolute; bottom: 24px } .pdisc p { font-size: 1rem } .pdisc span p { -webkit-animation-name: pdisc; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */ animation-name: pdisc; animation-duration: 1s; } .ovly .pdisc { bottom: 25% } @media screen and (max-width:640px) { .ovly .pdisc { bottom: 24px } } .ovly .pdisc p { font-size: 1.25rem } /* Standard syntax */ @keyframes span-1 { 25% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 1;} 50% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0.2;} 100% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0;display: none;} to {display: none;} } @keyframes span-2 { 25% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 1;} 50% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0.2;} 100% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0;display: none;} to {display: none;} } @keyframes span-3 { 25% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 1;} 50% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0.2;} 100% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0;display: none;} to {display: none;} } @keyframes span-4 { 0% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 1;} 50% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0.2;} 100% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0;display: none;} to {display: none;} } @keyframes span-5 { 25% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 1;} 50% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0.2;} 100% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0;display: none;} to {display: none;} } @keyframes pdisc { 100% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60)} } @keyframes pline { 0% {width: 20%} 100% {width: 0%} } 
 <div class="preloader active"> <section> <h3 class="p1"> <span>Just</span> <span>doing</span> <span>what</span> <span>I</span> <span>love</span> </h3> <div class="pline"></div> <div class="pdisc"><span><p>Diese Seite nutzt Cookies. Willkommen im Jahr 2018.</p></div> </section> </div>

    1 answer 1

    Here is the preloader written by me on codepen

    He uses GSAP as an animation engine. This is just the JS you need:

     var tlpl = new TimelineMax(), $p1 = $('.p1 span'); tlpl.staggerTo($p1, 0.5,{ opacity: 0, y: '-30', skewX: '5deg', skewY: '5deg', },0.10,'+=1.65');