<div class="demo">
<div class="demo__screen demo__screen--clickable">
<div class="demo__top-bullets">
<div class="demo__top-bullet demo__top-bullet--1 demo__top-bullet--hidden"></div>
<div class="demo__top-bullet demo__top-bullet--2 demo__top-bullet--hidden"></div>
<div class="demo__top-bullet demo__top-bullet--3 demo__top-bullet--hidden"></div>
<div class="demo__top-bullet demo__top-bullet--4 demo__top-bullet--hidden"></div>
<div class="demo__top-bullet demo__top-bullet--5 demo__top-bullet--hidden"></div>
</div>
<div class="demo__month">
September
</div>
<div class="demo__touch-id">Login with Touch ID</div>
<div class="demo__tip">(Touch / click the fingerprint)</div>
<div class="demo__logo-particles">
<div class="demo__logo-particle"></div>
<div class="demo__logo-particle"></div>
<div class="demo__logo-particle"></div>
<div class="demo__logo-particle"></div>
<div class="demo__logo-particle"></div>
<div class="demo__logo-particle"></div>
<div class="demo__logo-particle"></div>
<div class="demo__logo-particle"></div>
<div class="demo__logo-particle"></div>
<div class="demo__logo-particle"></div>
<div class="demo__logo-particle"></div>
<div class="demo__logo-particle"></div>
<div class="demo__logo-particle"></div>
<div class="demo__logo-particle"></div>
<div class="demo__logo-particle"></div>
</div>
<div class="demo__logo">
<div class="demo__logo-pic">
<div class="demo__logo-glass"></div>
<div class="demo__logo-glass"></div>
<div class="demo__logo-glass"></div>
</div>
<div class="demo__logo-name">CASHEY</div>
</div>
<div class="demo__money-particles">
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
<div class="demo__money-particle"></div>
</div>
<div class="demo__money">
<div class="demo__money-currency">$</div>
<div class="demo__money-digit">
1
2
3
4
5
6
7
8
1
</div>
<div class="demo__money-digit">
2
2
3
4
5
6
7
8
2
</div>
<div class="demo__money-digit">
3
2
3
4
5
6
7
8
3
</div>
<div class="demo__money-digit">
9
2
3
4
5
6
7
8
9
</div>
<div class="demo__money-digit">
9
2
3
4
5
6
7
8
9
</div>
</div>
<svg class="demo__fprint" viewBox="0 0 180 320">
<defs>
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#8742cc"/>
<stop offset="100%" stop-color="#a94a8c"/>
</linearGradient>
</defs>
<path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--pinkish" d="M46.1,214.3c0,0-4.7-15.6,4.1-33.3"/>
<path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--purplish" d="M53.5,176.8c0,0,18.2-30.3,57.5-13.7"/>
<path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--pinkish" d="M115.8,166.5c0,0,19.1,8.7,19.6,38.4"/>
<path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--pinkish" d="M47.3,221c0,0,3.1-2.1,4.1-4.6s-5.7-20.2,7-36.7c8.5-11,22.2-19,37.9-15.3"/>
<path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--pinkish" d="M102.2,165.4c10.2,2.7,19.5,10.4,23.5,20.2c6.2,15.2,4.9,27.1,4.1,39.4"/>
<path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--purplish" d="M51.1,226.5c3.3-2.7,5.1-6.3,5.7-10.5c0.5-4-0.3-7.7-0.3-11.7"/>
<path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--purplish" d="M56.3,197.9c3.1-16.8,17.6-29.9,35.1-28.8c17.7,1.1,30.9,14.9,32.8,32.2"/>
<path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--purplish" d="M124.2,207.9c0.5,9.3,0.5,18.7-2.1,27.7"/>
<path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--pinkish" d="M54.2,231.1c2.1-2.6,4.6-5.1,6.3-8c4.2-6.8,0.9-14.8,1.5-22.3c0.5-7.1,3.4-16.3,10.4-19.7"/>
<path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--purplish" d="M77.9,178.2c9.3-5.1,22.9-4.7,30.5,3.3"/>
<path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--purplish" d="M113,186.5c0,0,13.6,18.9,1,54.8"/>
<path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--pinkish" d="M57.3,235.2c0,0,5.7-3.8,9-12.3"/>
<path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--pinkish" d="M111.7,231.5c0,0-4.1,11.5-5.7,13.6"/>
<path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--purplish" d="M61.8,239.4c9.3-8.4,12.7-19.7,11.8-31.9c-0.9-12.7,3.8-20.6,18.5-21.2"/>
<path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--pinkish" d="M97.3,188.1c8.4,2.7,11,13,11.3,20.8c0.4,11.8-2.5,23.7-7.9,34.1c-0.1,0.1-0.1,0.2-0.2,0.3
c-0.4,0.8-0.8,1.5-1.2,2.3c-0.5,0.8-1,1.7-1.5,2.5"/>
<path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--purplish" d="M66.2,242.5c0,0,15.3-11.1,13.6-34.9"/>
<path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--pinkish" d="M78.7,202.5c1.5-4.6,3.8-9.4,8.9-10.6c13.5-3.2,15.7,13.3,14.6,22.1"/>
<path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--pinkish" d="M102.2,219.7c0,0-1.7,15.6-10.5,28.4"/>
<path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--pinkish" d="M72,244.9c0,0,8.8-9.9,9.9-15.7"/>
<path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--pinkish" d="M84.5,223c0.3-2.6,0.5-5.2,0.7-7.8c0.1-2.1,0.2-4.6-0.1-6.8c-0.3-2.2-1.1-4.3-0.9-6.5c0.5-4.4,7.2-6.9,10.1-3.1
c1.7,2.2,1.7,5.3,1.9,7.9c0.4,3.8,0.3,7.6,0,11.4c-1,10.8-5.4,21-11.5,29.9"/>
<path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--purplish" d="M90,201.2c0,0,4.6,28.1-11.4,45.2"/>
<path class="demo__fprint-path demo__fprint-path--pinkish" id='demo__elastic-path' d="M67.3,219C65,188.1,78,180.1,92.7,180.3c18.3,2,23.7,18.3,20,46.7"/>
<line id='demo__straight-path' x1="0" y1="151.3" x2="180" y2="151.3"/>
<path class="demo__hidden-path" id='demo__arc-to-top' d="M0,148.4c62.3-13.5,122.3-13.5,180,0"/>
<path class="demo__hidden-path" id='demo__curve' d="M0,140.2c13.1-10.5,34.7-17,48.5-4.1c5.5,5.2,7.6,12.1,9.2,19.2c2.4,10.5,4.3,21,7.2,31.4c2.4,8.6,4.3,19.6,10.4,26.7c4.3,5,17.7,13.4,23.1,4.8c5.9-9.4,6.8-22.5,9.7-33c4.9-17.8,13-14.6,15.7-14.6c1.8,0,9,2.3,15.4,5.4c6.2,3,11.9,7.7,17.9,11.2c7,4.1,16.5,9.2,22.8,6.6"/>
<path class="demo__ending-path demo__ending-path--pinkish"d="M48.4,220c-5.8,4.2-6.9,11.5-7.6,18.1c-0.8,6.7-0.9,14.9-9.9,12.4c-9.1-2.5-14.7-5.4-19.9-13.4c-3.4-5.2-0.4-12.3,2.3-17.2c3.2-5.9,6.8-13,14.5-11.6c3.5,0.6,7.7,3.4,4.5,7.1"/>
<path class="demo__ending-path demo__ending-path--pinkish"d="M57.3,235.2c-14.4,9.4-10.3,19.4-17.8,21.1c-5.5,1.3-8.4-7.8-13.8-4.2c-2.6,1.7-5.7,7.7-4.6,10.9c0.7,2,4.1,2,5.8,2.4c3,0.7,8.4,3,7.6,7.2c-0.6,3-5,5.3-2.4,8.7c1.8,2.2,4.7,1.1,6.9,0.3c11.7-4.3,14.5,0.8,16.5,0.9"/>
<path class="demo__ending-path demo__ending-path--purplish"d="M79,246c-1.8,2.4-4.9,2.9-7.6,3.2c-2.7,0.3-5.8-0.8-7.7,1.6c-2.9,3.3,0.7,8.2-1.2,12c-1.5,2.8-4.5,2.4-6.9,1.3c-10.1-4.7-33.2-17.5-38.1-2.5c-1.1,3.4-1.9,7.5-1.3,11c0.6,4,5.6,7.9,7.7,2.3c0.8-2.1,3.1-8.6-1-8.9"/>
<path class="demo__ending-path demo__ending-path--pinkish"d="M91.8,248c0,0-3.9,6.4-6.2,9.2c-3.8,4.5-7.9,8.9-11.2,13.8c-1.9,2.8-4.4,6.4-3.7,10c0.9,5.2,4.7,12.5,9.7,14.7c5.2,2.2,15.9-4.7,13.1-10.8c-1.4-3-6.3-7.9-10-7.2c-1,0.2-1.8,1-2,2"/>
<path class="demo__ending-path demo__ending-path--purplish"d="M114.8,239.4c-2.7,6.1-8.3,12.8-7.8,19.8c0.3,4.6,3.8,7.4,7.8,9.1c8.9,3.8,19.7,0.4,28.6-1.3c8.8-1.7,19.7-3.2,23.7,6.7c2.8,6.8,6.1,14.7,4.4,22.2"/>
<path class="demo__ending-path demo__ending-path--pinkish"d="M129.9,224.2c-0.4,7.5-3.1,18,0.7,25c2.8,5.1,14.3,6.3,19.5,7.4c3.7,0.7,8.7,2.2,12-0.5c6.7-5.4,11.1-13.7,14.1-21.6c3.1-8-4.4-12.8-11.1-14.5c-5-1.3-19.1-0.7-21-6.7c-0.9-2.8,1.8-5.9,3.4-7.9"/>
<path class="demo__under-curve" d="M0,140.2c13.1-10.5,34.7-17,48.5-4.1c5.5,5.2,7.6,12.1,9.2,19.2c2.4,10.5,4.3,21,7.2,31.4c2.4,8.6,4.3,19.6,10.4,26.7c4.3,5,17.7,13.4,23.1,4.8c5.9-9.4,6.8-22.5,9.7-33c4.9-17.8,13-14.6,15.7-14.6c1.8,0,9,2.3,15.4,5.4c6.2,3,11.9,7.7,17.9,11.2c7,4.1,16.5,9.2,23.8,6.6l0,125.5l-181,0l0,-179.8"/>
</svg>
<div class="demo__bullet"></div>
<div class="demo__member">Member of World Bank Group</div>
<div class="demo__dates">
<div class="demo__date">8</div>
<div class="demo__date">9</div>
<div class="demo__date">10</div>
<div class="demo__date">11</div>
<div class="demo__date">12</div>
<div class="demo__date">13</div>
<div class="demo__date">14</div>
</div>
</div>
<div title="Restart" class="demo__buttons">
<div class="demo__restart-button demo__button">
<svg viewBox="0 0 500 500" class="demo__restart-icon">
<path d="M268.175,488.161c98.2-11,176.9-89.5,188.1-187.7c14.7-128.4-85.1-237.7-210.2-239.1v-57.6c0-3.2-4-4.9-6.7-2.9l-118.6,87.1c-2,1.5-2,4.4,0,5.9l118.6,87.1c2.7,2,6.7,0.2,6.7-2.9v-57.5c87.9,1.4,158.3,76.2,152.3,165.6c-5.1,76.9-67.8,139.3-144.7,144.2c-81.5,5.2-150.8-53-163.2-130c-2.3-14.3-14.8-24.7-29.2-24.7c-17.9,0-31.9,15.9-29.1,33.6C49.575,418.961,150.875,501.261,268.175,488.161z"/>
</svg>
</div>
<div title="Check out my other pens" class="demo__codepen demo__button">
<a href="https://codepen.io/kiyutink/" target="_blank">
<i class="fa fa-codepen"></i>
</a>
</div>
<div title="Follow me on twitter" class="demo__twitter demo__button">
<a href="https://twitter.com/kiyutin_k" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<div title="Original dribbble shot by Jakub Reis" class="demo__original demo__button">
<a href="https://dribbble.com/shots/2716909-Opening-screen-for-banking-App" target="_blank">
<i class="fa fa-dribbble"></i>
</a>
</div>
</div>
</div>
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
$scale: 1.65;
$purplish-color: #8742cc;
$pinkish-color: #a94a8c;
$pale-pink-color: #ECC8DD;
$bg-color: #372546;
$font: Muli, sans-serif;
@mixin particlesContainer($top) {
position: absolute;
width: 2px * $scale;
height: 2px * $scale;
left: 89px * $scale;
top: $top * $scale;
opacity: 0;
&--visible {
opacity: 1;
}
}
@mixin particle($sweep, $time) {
width: 1.5px * $scale;
height: 1.5px * $scale;
border-radius: 50%;
background-color: white;
opacity: 1;
transition: all $time ease;
position: absolute;
will-change: transform;
//phones can't handle the particles very well :(
@media (max-width: 400px) {
display: none;
}
@for $i from 1 through 30 {
&:nth-child(#{$i}) {
left: (random($sweep) - $sweep / 2) * $scale + px;
@if random(100) > 50 {
background-color: $purplish-color;
}
@else {
background-color: $pinkish-color;
}
}
&--exploded:nth-child(#{$i}) {
transform: translate3d((random(110) - 55) * $scale + px, random(35) * $scale + px, 0);
opacity: 0;
}
}
}
.demo {
background: linear-gradient(45deg, lighten($pinkish-color, 10%), lighten($purplish-color, 10%));
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
user-select: none;
overflow: hidden;
position: relative;
&__screen {
position: relative;
background-color: $bg-color;
overflow: hidden;
flex-shrink: 0;
&--clickable {
cursor: pointer;
tap-highlight-color: transparent;
}
}
&__logo {
font-family: $font;
font-weight: 600;
letter-spacing: 0.7px * $scale;
font-size: 7px * $scale;
position: absolute;
width: 100%;
text-align: center;
color: white;
top: 10px * $scale;
transition: all 0.25s ease;
will-change: transform, opacity;
&--hidden {
opacity: 0;
transform: translate3d(0, -20px * $scale, 0);
}
}
&__logo-particles {
@include particlesContainer(15px);
}
&__logo-particle {
@include particle(50, 1.7s);
}
&__logo-name {
display: inline-block;
vertical-align: middle;
}
&__logo-pic {
display: inline-block;
width: 16px * $scale;
height: 16px * $scale;
vertical-align: middle;
position: relative;
transform: scale(0.65);
}
&__logo-glass {
border: 1px * $scale solid $pale-pink-color;
width: 7px * $scale;
height: 7px * $scale;
border-radius: 50%;
position: absolute;
&:after {
display: block;
content: '';
width: 4px * $scale;
height: 1px * $scale;
background-color: $pale-pink-color;
top: 50%;
position: absolute;
left: 5px * $scale;
top: 2px * $scale;
}
&:nth-child(2) {
left: 12px * $scale;
transform: rotate(120deg);
border: 1px * $scale solid $pinkish-color;
&:after {
background-color: $pinkish-color;
}
}
&:nth-child(3) {
left: 6px * $scale;
top: 10px * $scale;
transform: rotate(240deg);
border: 1px * $scale solid $purplish-color;
&:after {
background-color: $purplish-color;
}
}
}
&__fprint-path {
stroke-width: 2.5px;
stroke-linecap: round;
fill: none;
stroke: white;
visibility: hidden;
transition: opacity 0.5s ease;
will-change: stroke-dashoffset, stroke-dasharray;
transform: translateZ(0);
&--pinkish {
stroke: $pinkish-color;
}
&--purplish {
stroke: $purplish-color;
}
&--gradient {
stroke: url(#linear);
transition: stroke 0.3s ease;
transition-delay: 0.5s;
}
&#demo__elastic-path {
will-change: opacity;
opacity: 1;
}
}
&__hidden-path {
display: none;
}
&__ending-path {
fill: none;
stroke-width: 2.5px;
stroke-dasharray: 60 1000;
stroke-dashoffset: 61;
stroke-linecap: round;
will-change: stroke-dashoffset, stroke-dasharray, opacity;
transform: translateZ(0);
transition: stroke-dashoffset 1s ease, stroke-dasharray 0.5s linear, opacity 0.75s ease;
&--removed {
stroke-dashoffset: -130;
stroke-dasharray: 5 1000;
}
&--transparent {
opacity: 0;
}
&--pinkish {
stroke: $pinkish-color;
}
&--purplish {
stroke: $purplish-color;
}
}
&__fprint {
width: 180px * $scale;
height: 320px * $scale;
position: relative;
top: 20px * $scale;
overflow: visible;
background-image: url('https://kiyutink.github.io/svg/fprintBackground.svg');
background-size: cover;
&--no-bg {
background-image: none;
}
}
&__bullet {
position: absolute;
width: 4px * $scale;
height: 4px * $scale;
background-color: white;
border-radius: 50%;
top: 210px * $scale;
left: 88px * $scale;
opacity: 0;
transition: all 0.7s cubic-bezier(0.455, 0.030, 0.515, 0.955);
will-change: transform, opacity;
&--with-aura {
box-shadow: 0 0 0 3px * $scale rgba(255, 255, 255, 0.3);
}
&--elevated {
transform: translate3d(0, -250px * $scale, 0);
opacity: 1;
}
&--descended {
transform: translate3d(0, 30px * $scale, 0);
opacity: 1;
transition: all 0.6s cubic-bezier(0.285, 0.210, 0.605, 0.910);
}
}
&__top-bullet {
position: absolute;
width: 2px * $scale;
height: 2px * $scale;
background-color: white;
top: 16px * $scale;
left: 0;
border-radius: 50%;
opacity: 0.7;
transition: all 0.5s ease;
transition-delay: 0.1s;
will-change: opacity, transform;
&--1 {
left: 39px * $scale;
transform: translate3d($scale * 50px, 0, 0);
opacity: 0.2;
}
&--2 {
left: 64px * $scale;
transform: translate3d($scale * 25px, 0, 0);
opacity: 0.4;
}
&--3 {
background-color: transparent;
width: 6px * $scale;
height: 6px * $scale;
border: 2px solid white;
top: 14px * $scale;
left: 87px * $scale;
box-shadow: 0 0 8px * $scale white;
}
&--4 {
left: 114px * $scale;
transform: translate3d(-$scale * 25px, 0, 0);
opacity: 0.4;
}
&--5 {
left: 139px * $scale;
transform: translate3d(-$scale * 50px, 0, 0);
opacity: 0.2;
}
&--hidden {
opacity: 0;
}
&--spread {
transform: none;
}
}
&__month {
width: 100%;
height: 20px * $scale;
position: absolute;
top: 25px * $scale;
text-align: center;
color: white;
font-size: 7px * $scale;
font-weight: 300;
font-family: $font;
opacity: 0;
transform: translate3d(0, -15px * $scale, 0);
transition: all 0.25s ease-out;
transition-delay: 0.3s;
will-change: transform, opacity;
&--visible {
opacity: 1;
transform: none;
}
}
&__money {
width: 100%;
height: 26px * $scale;
font-size: 26px * $scale;
position: absolute;
display: flex;
color: white;
font-family: $font;
font-weight: 300;
top: 70px * $scale;
justify-content: center;
align-items: flex-start;
transform: translate3d(0, -30px * $scale, 0);
opacity: 0;
transition: all 0.3s ease;
transition-delay: 0.3s;
will-change: transform, opacity;
overflow: hidden;
&--visible {
transform: none;
opacity: 1;
}
}
&__money-particles {
@include particlesContainer(100px);
}
&__money-particle {
@include particle(100, 1.5s);
}
&__money-currency {
display: flex;
align-items: center;
width: 17px * $scale;
line-height: 26px * $scale;
}
&__money-digit {
width: 15px * $scale;
display: flex;
line-height: 26px * $scale;
will-change: transform;
justify-content: center;
align-items: center;
&:nth-child(3) {
margin-right: 5px * $scale;
}
@for $i from 2 through 6 {
&:nth-child(#{$i}) {
transition: transform 0.1s * $i + 0.2s ease;
transition-delay: 0.3s;
transform: translate3d(0, -26px * $scale * 8, 0);
}
&--visible:nth-child(#{$i}) {
transform: none;
}
}
}
&__under-curve {
fill: url(#linear);
opacity: 0;
transition: opacity 0.4s linear;
transition-delay: 0.6s;
will-change: opacity;
&--visible {
opacity: 0.8;
}
}
&__touch-id {
position: absolute;
font-family: $font;
font-size: 10px * $scale;
top: 90px * $scale;
color: white;
width: 100%;
text-align: center;
transition: all 0.25s ease;
will-change: transform, opacity;
&--hidden {
opacity: 0;
transition: translate3d(0, -20px * $scale, 0);
}
}
&__tip {
position: absolute;
top: 105px * $scale;
font-family: $font;
font-size: 6px * $scale;
color: rgba(255, 255, 255, 0.6);
text-align: center;
width: 100%;
transition: opacity 0.3s ease;
&--hidden {
opacity: 0;
}
}
&__dates {
position: absolute;
bottom: 5px * $scale;
width: 100%;
display: flex;
justify-content: center;
transform: translate3d(0, 20px * $scale, 0);
opacity: 0;
transition: all 0.3s ease;
will-change: transform, opacity;
&--visible {
opacity: 1;
transform: none;
}
}
&__member {
position: absolute;
width: 100%;
bottom: 10px * $scale;
text-align: center;
color: white;
font-family: $font;
font-size: 7px * $scale;
transition: all 0.3s ease;
will-change: transform, opacity;
&--hidden {
transform: translate3d(0, 20px * $scale, 0);
opacity: 0;
}
}
&__date {
border-radius: 50%;
height: 18px * $scale;
width: 18px * $scale;
color: white;
font-size: 7px * $scale;
font-family: $font;
margin: 0 2px * $scale;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
&:nth-child(4) {
border: 2px solid $pale-pink-color;
}
}
&__buttons {
position: absolute;
width: 60px * $scale;
height: 55px * $scale;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
flex-direction: column;
transform: translateY(-20px * $scale);
pointer-events: none;
}
&__restart-button {
transform: translate3d(0, -100px * $scale, 0);
}
&__codepen {
a {
color: black;
}
transform: translate3d(-100px * $scale, 0, 0);
}
&__twitter {
a {
color: #1DA1F2;
}
transform: translate3d(100px * $scale, 0, 0);
}
&__original {
a {
color: #ea4c89;
}
transform: translate3d(0, 100px * $scale, 0);
}
&__button {
width: 25px * $scale;
height: 25px * $scale;
flex-shrink: 0;
background-color: rgba(255, 255, 255, 0.7);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
opacity: 0;
will-change: opacity, transform;
transition: all 0.4s ease;
pointer-events: none;
font-size: 15px * $scale;
line-height: 25px * $scale;
&--visible {
transform: none;
opacity: 1;
pointer-events: auto;
cursor: pointer;
&:hover {
background-color: white;
box-shadow: 0 0 5px * $scale white;
}
}
}
&__restart-icon {
flex-shrink: 0;
width: 15px * $scale;
height: 15px * $scale;
fill: $bg-color;
}
}
.no-animation {
opacity: 0;
transition: none!important;
}$(document).ready(function() {
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(cb) {
setTimeout(() => cb(new Date()), 1000 / 60);
}
}
const TIME_TO_FILL_FPRINT = 700; //ms
const TIME_TO_REMOVE_FPRINT = 250;
const DELAY_TO_CURVE = 350;
const WOBBLE_TIME = 1000;
const ELASTIC_TRANSITION_TIME_TO_STRAIGHT = 250;
const ELASTIC_TRANSITION_TIME_TO_CURVED = 300;
const ELEVATION_TIME = 700;
const DELAY_AFTER_ELEVATION = 700;
const DELAY_TO_ANIMATE_ELASTIC_STROKE = 400;
const DELAY_TO_ANIMATE_MONEY_PARTICLES = 300;
const DELAY_TO_ANIMATE_LOGO_PARTICLES = 500;
const DELAY_TO_BULLET_AURA = 300;
const DELAY_TO_DATES = 600;
const DELAY_TO_RESTART = 4000;
const fprintPathSelector = '.demo__fprint-path';
const $elasticPath = $('#demo__elastic-path');
const $fprintPaths = $('.demo__fprint-path');
const $endingPaths = $('.demo__ending-path');
const fprintPathsFirstHalf = [];
const fprintPathsSecondHalf = [];
const $bullet = $('.demo__bullet');
const $topBullets = $('.demo__top-bullet');
const $month = $('.demo__month');
const $money = $('.demo__money');
const $moneyDigits = $('.demo__money-digit');
const $underCurve = $('.demo__under-curve');
const $moneyParticles = $('.demo__money-particle');
const $moneyParticlesContainer = $('.demo__money-particles');
const $touchId = $('.demo__touch-id');
const $logo = $('.demo__logo');
const $logoParticlesContainer = $('.demo__logo-particles');
const $logoParticles = $('.demo__logo-particle');
const $dates = $('.demo__dates');
const $member = $('.demo__member');
const $fprint = $('.demo__fprint');
const $buttons = $('.demo__button');
const $restart = $('.demo__restart-button');
const $screen = $('.demo__screen');
const $tip = $('.demo__tip');
let isFprintAnimationInProgress = false;
let isFprintAnimationOver = false;
let curFprintPathsOffset = -1;
let fprintProgressionDirection = 1;
let lastRafCallTimestamp = 0;
let fprintTick = getPropertyIncrement(0, 1, TIME_TO_FILL_FPRINT);
let fprintPaths = [];
for (let i = 0; i < $(fprintPathSelector).length; i++) {
fprintPaths.push(new Path(fprintPathSelector, i));
fprintPaths[i].offset(-1).makeVisible();
if (fprintPaths[i].removesForwards)
fprintPathsSecondHalf.push(fprintPaths[i]);
else
fprintPathsFirstHalf.push(fprintPaths[i]);
}
function removeFprint() {
$endingPaths.addClass('demo__ending-path--removed');
setTimeout(() => {
$endingPaths.addClass('demo__ending-path--transparent');
}, TIME_TO_REMOVE_FPRINT * 0.9);
fprintProgressionDirection = -1;
window.requestAnimationFrame(removeFprintFrame);
}
function removeFprintFrame(timestamp) {
if (timestamp - lastRafCallTimestamp >= 1000 / 65) {
curFprintPathsOffset += fprintTick * fprintProgressionDirection;
offsetFprintPathsByHalves(curFprintPathsOffset);
lastRafCallTimestamp = timestamp;
}
if (curFprintPathsOffset >= -1)
window.requestAnimationFrame(removeFprintFrame);
else {
curFprintPathsOffset = -1;
offsetAllFprintPaths(curFprintPathsOffset);
}
}
function startElasticAnimation() {
$elasticPath.css('stroke-dasharray', 'none');
const elasticAnimationTimeline = new TimelineLite();
elasticAnimationTimeline
.to('#demo__elastic-path', ELASTIC_TRANSITION_TIME_TO_STRAIGHT / 1000, {
delay: TIME_TO_REMOVE_FPRINT / 1000 * 0.7,
morphSVG: '#demo__arc-to-top'
})
.to('#demo__elastic-path', WOBBLE_TIME / 1000, {
morphSVG: '#demo__straight-path',
ease: Elastic.easeOut.config(1, 0.3)
})
.to('#demo__elastic-path', ELASTIC_TRANSITION_TIME_TO_CURVED / 1000, {
delay: DELAY_TO_CURVE / 1000,
morphSVG: '#demo__curve'
})
animateBullet();
}
function elevateBullet() {
$bullet.addClass('demo__bullet--elevated');
animateMoneyParticles();
animateLogoParticles();
}
function descendBullet() {
$bullet.addClass('demo__bullet--descended').removeClass('demo__bullet--elevated');
animateTopBullets();
animateMoney();
animateMonth();
animateUnderCurve();
animateBulletAura();
animateDates();
animateButtons();
}
function animateBulletAura() {
setTimeout(() => $bullet.addClass('demo__bullet--with-aura'), DELAY_TO_BULLET_AURA);
}
function animateButtons() {
setTimeout(() => $buttons.addClass('demo__button--visible'), DELAY_TO_RESTART);
}
function animateMonth() {
$month.addClass('demo__month--visible');
}
function animateBullet() {
elevateBullet();
$screen.removeClass('demo__screen--clickable');
setTimeout(descendBullet, ELEVATION_TIME + DELAY_AFTER_ELEVATION);
}
function animateTopBullets() {
$topBullets.removeClass('demo__top-bullet--hidden').addClass('demo__top-bullet--spread');
}
function animateMoney() {
$money.addClass('demo__money--visible');
$moneyDigits.addClass('demo__money-digit--visible');
}
function animateUnderCurve() {
$underCurve.addClass('demo__under-curve--visible');
setTimeout(() => $elasticPath.addClass('demo__fprint-path--gradient'), DELAY_TO_ANIMATE_ELASTIC_STROKE);
}
function animateDates() {
setTimeout(() => {
$dates.addClass('demo__dates--visible');
$member.addClass('demo__member--hidden');
}, DELAY_TO_DATES);
}
function animateMoneyParticles() {
setTimeout(() => {
$moneyParticlesContainer.addClass('demo__money-particles--visible')
$moneyParticles.addClass('demo__money-particle--exploded');
$touchId.addClass('demo__touch-id--hidden');
$tip.addClass('demo__tip--hidden');
}, DELAY_TO_ANIMATE_MONEY_PARTICLES);
}
function animateLogoParticles() {
setTimeout(() => {
$logoParticlesContainer.addClass('demo__logo-particles--visible')
$logoParticles.addClass('demo__logo-particle--exploded');
$logo.addClass('demo__logo--hidden');
}, DELAY_TO_ANIMATE_LOGO_PARTICLES);
}
function fprintFrame(timestamp) {
if (timestamp - lastRafCallTimestamp >= 1000 / 65) {
lastRafCallTimestamp = timestamp;
curFprintPathsOffset += fprintTick * fprintProgressionDirection;
offsetAllFprintPaths(curFprintPathsOffset);
}
if (curFprintPathsOffset >= -1 && curFprintPathsOffset <= 0) {
isFprintAnimationInProgress = true;
window.requestAnimationFrame(fprintFrame);
}
else if (curFprintPathsOffset > 0) {
curFprintPathsOffset = 0;
offsetAllFprintPaths(curFprintPathsOffset);
isFprintAnimationInProgress = false;
isFprintAnimationOver = true;
$fprint.addClass('demo__fprint--no-bg');
startElasticAnimation();
fprintTick = getPropertyIncrement(0, 1, TIME_TO_REMOVE_FPRINT);
window.requestAnimationFrame(removeFprint);
}
else if (curFprintPathsOffset < -1) {
curFprintPathsOffset = -1;
offsetAllFprintPaths(curFprintPathsOffset);
isFprintAnimationInProgress = false;
}
}
function offsetAllFprintPaths(ratio) {
fprintPaths.forEach(path => path.offset(ratio));
}
function offsetFprintPathsByHalves(ratio) {
fprintPathsFirstHalf.forEach(path => path.offset(ratio));
fprintPathsSecondHalf.forEach(path => path.offset(-ratio));
}
$screen.on('mousedown touchstart', function() {
fprintProgressionDirection = 1;
if (!isFprintAnimationInProgress && !isFprintAnimationOver)
window.requestAnimationFrame(fprintFrame);
})
$(document).on('mouseup touchend', function() {
fprintProgressionDirection = -1;
if (!isFprintAnimationInProgress && !isFprintAnimationOver)
window.requestAnimationFrame(fprintFrame);
})
function clear(e) {
$('.demo__screen *').addClass('no-animation');
$screen.addClass('demo__screen--clickable');
$buttons.removeClass('demo__button--visible');
$fprint.removeClass('demo__fprint--no-bg');
$member.removeClass('demo__member--hidden');
$dates.removeClass('demo__dates--visible');
$bullet.removeClass('demo__bullet--with-aura');
$logoParticlesContainer.removeClass('demo__logo-particles--visible')
$logoParticles.removeClass('demo__logo-particle--exploded');
$logo.removeClass('demo__logo--hidden');
$touchId.removeClass('demo__touch-id--hidden');
$moneyParticlesContainer.removeClass('demo__money-particles--visible');
$moneyParticles.removeClass('demo__money-particle--exploded');
$elasticPath.removeClass('demo__fprint-path--gradient');
$underCurve.removeClass('demo__under-curve--visible');
$money.removeClass('demo__money--visible');
$moneyDigits.removeClass('demo__money-digit--visible');
$topBullets.addClass('demo__top-bullet--hidden').removeClass('demo__top-bullet--spread');
$month.removeClass('demo__month--visible');
$bullet.removeClass('demo__bullet--elevated demo__bullet--descended');
$endingPaths.removeClass('demo__ending-path--removed demo__ending-path--transparent');
$fprintPaths.removeClass('demo__fprint-path--transparent');
e.stopPropagation();
isFprintAnimationOver = false;
isFprintAnimationInProgress = false;
fprintTick = getPropertyIncrement(0, 1, TIME_TO_FILL_FPRINT);
TweenMax.to('#demo__elastic-path', 0, {morphSVG: '#demo__elastic-path', onComplete: () => {
for (let i = 0; i < $(fprintPathSelector).length; i++) {
fprintPaths[i].setDasharray().offset(-1).makeVisible();
}
}});
setTimeout(() => $('.demo__screen *').removeClass('no-animation'), 100);
}
$restart.on('click', clear);
});
function getPropertyIncrement(startValue, endValue, transitionDuration) {
const TICK_TIME = 1000 / 60;
const ticksToComplete = transitionDuration / TICK_TIME;
return (endValue - startValue) / ticksToComplete;
}
class Path {
constructor(selector, index) {
this.index = index;
this.querySelection = document.querySelectorAll(selector)[index];
this.length = this.querySelection.getTotalLength();
this.$ = $(selector).eq(index);
this.setDasharray();
this.removesForwards = this.$.hasClass('demo__fprint-path--removes-forwards');
}
setDasharray() {
// + 2 hack just fixes weird firefox bug (classic)
this.$.css('stroke-dasharray', `${this.length} ${this.length + 2}`);
return this;
}
offset(ratio) {
// + 1 hack just fixes weird firefox bug (classic)
this.$.css('stroke-dashoffset', -this.length * ratio + 1);
return this;
}
makeVisible() {
this.$.css('visibility', 'visible');
return this;
}
}
External CSS
This Pen doesn't use any external CSS resources.