Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created Nov 22, 2017

Embed
What would you like to do?
Xmas preloader
<div id="snow"></div>
<svg viewBox="0 0 500 500">
<line class="dotline1" x1="5" x2="500" y1="235" y2="235" stroke="#DE4E37" stroke-width="5" stroke-linecap="round" stroke-dasharray="1, 10"/>
<line class="dotline2" x1="5" x2="500" y1="235" y2="235" stroke="#DE4E37" stroke-width="5" stroke-linecap="round" stroke-dasharray="1, 10"/>
<g class="sock" transform="translate(30 180)">
<path class="base" d="M26.3,31.8v30.3l-21,22.7c0,0-11.3,12,5.3,19.3h25.3c0,0,11.4-0.3,16.7-7.5c3.1-4.2,13.6-19.9,13.6-19.9s2.4-3.3,2.7-8.7l0.4-36.3H26.3z"/>
<path class="top" d="M71.4,33.2H23.8c-3,0-5.5-2.5-5.5-5.5V7c0-3,2.5-5.5,5.5-5.5h47.6c3,0,5.5,2.5,5.5,5.5v20.6C76.9,30.7,74.4,33.2,71.4,33.2z"/>
<path class="stripe" d="M55.7,74.3c0,0,0.6-10.5,13.4-10.5"/>
<circle class="dot1" cx="53.1" cy="23.9" r="2.5"/>
<circle class="dot2" cx="60.6" cy="23.9" r="2.5"/>
<circle class="dot3" cx="68" cy="23.9" r="2.5"/>
</g>
<g class="sock white" transform="translate(30 180)">
<path class="base" d="M26.3,31.8v30.3l-21,22.7c0,0-11.3,12,5.3,19.3h25.3c0,0,11.4-0.3,16.7-7.5c3.1-4.2,13.6-19.9,13.6-19.9s2.4-3.3,2.7-8.7l0.4-36.3H26.3z"/>
<path class="top" d="M71.4,33.2H23.8c-3,0-5.5-2.5-5.5-5.5V7c0-3,2.5-5.5,5.5-5.5h47.6c3,0,5.5,2.5,5.5,5.5v20.6C76.9,30.7,74.4,33.2,71.4,33.2z"/>
<path class="stripe" d="M55.7,74.3c0,0,0.6-10.5,13.4-10.5"/>
<circle class="dot1" cx="53.1" cy="23.9" r="2.5"/>
<circle class="dot2" cx="60.6" cy="23.9" r="2.5"/>
<circle class="dot3" cx="68" cy="23.9" r="2.5"/>
</g>
<g class="sock" transform="translate(30 180)">
<path class="base" d="M26.3,31.8v30.3l-21,22.7c0,0-11.3,12,5.3,19.3h25.3c0,0,11.4-0.3,16.7-7.5c3.1-4.2,13.6-19.9,13.6-19.9s2.4-3.3,2.7-8.7l0.4-36.3H26.3z"/>
<path class="top" d="M71.4,33.2H23.8c-3,0-5.5-2.5-5.5-5.5V7c0-3,2.5-5.5,5.5-5.5h47.6c3,0,5.5,2.5,5.5,5.5v20.6C76.9,30.7,74.4,33.2,71.4,33.2z"/>
<path class="stripe" d="M55.7,74.3c0,0,0.6-10.5,13.4-10.5"/>
<circle class="dot1" cx="53.1" cy="23.9" r="2.5"/>
<circle class="dot2" cx="60.6" cy="23.9" r="2.5"/>
<circle class="dot3" cx="68" cy="23.9" r="2.5"/>
</g>
<g class="sock white" transform="translate(30 180)">
<path class="base" d="M26.3,31.8v30.3l-21,22.7c0,0-11.3,12,5.3,19.3h25.3c0,0,11.4-0.3,16.7-7.5c3.1-4.2,13.6-19.9,13.6-19.9s2.4-3.3,2.7-8.7l0.4-36.3H26.3z"/>
<path class="top" d="M71.4,33.2H23.8c-3,0-5.5-2.5-5.5-5.5V7c0-3,2.5-5.5,5.5-5.5h47.6c3,0,5.5,2.5,5.5,5.5v20.6C76.9,30.7,74.4,33.2,71.4,33.2z"/>
<path class="stripe" d="M55.7,74.3c0,0,0.6-10.5,13.4-10.5"/>
<circle class="dot1" cx="53.1" cy="23.9" r="2.5"/>
<circle class="dot2" cx="60.6" cy="23.9" r="2.5"/>
<circle class="dot3" cx="68" cy="23.9" r="2.5"/>
</g>
</svg>
const scene = []
const tl = new TimelineMax({
repeat: -1,
// repeatDelay: 1
})
const tls = []
const svg = document.querySelector('svg')
const socks = svg.querySelectorAll('.sock')
const dotline1 = svg.querySelector('.dotline1')
const dotline2 = svg.querySelector('.dotline2')
const createSock = (sock) => {
console.log(sock)
let obj = {
sock: sock,
base: sock.querySelector('.base'),
top: sock.querySelector('.top'),
stripe: sock.querySelector('.stripe'),
dot1: sock.querySelector('.dot1'),
dot2: sock.querySelector('.dot2'),
dot3: sock.querySelector('.dot3')
}
let timeline = createSockTl(obj)
tls.push(timeline)
scene.push(obj)
}
const createSockTl = (obj) => {
let tl = new TimelineMax()
tl.fromTo(obj.sock, 1.25, {
scale: 0,
transformOrigin: '50% 50%',
}, {
scale: 1,
ease: Elastic.easeOut.config(2, 3)
}, 0)
tl.staggerFrom([obj.base, obj.top, obj.stripe], 0.5, {
drawSVG: '0% 0%',
ease: Elastic.easeOut.config(0.1, 3)
}, 0.25, 0)
tl.from([obj.top, obj.base], 1, {
fill: 'rgba(255, 255, 255, 0)',
ease: Elastic.easeOut.config(2, 3)
}, 0)
return tl
}
for (var i = 0; i < 4; i++) {
createSock(socks[i])
}
tl.add(TweenMax.from([dotline1, dotline2], 0.75, {
scaleX: 0,
transformOrigin: '50% 50%',
ease: Back.easeOut.config(0.9, 2)
}), 0)
tl.add(TweenMax.to([dotline1], 0.25, {
attr: {
y1: '-=80',
y2: '-=80'
},
transformOrigin: '50% 50%',
ease: Back.easeOut.config(0.9, 2)
}), 0.5)
tl.add(TweenMax.to([dotline2], 0.25, {
attr: {
y1: '+=80',
y2: '+=80'
},
transformOrigin: '50% 50%',
ease: Back.easeOut.config(0.9, 2)
}), 0.5)
tl.add(tls[0], 0.5)
tl.add(tls[1], 0.5)
tl.add(tls[2], 0.5)
tl.add(tls[3], 0.5)
tl.add(TweenMax.staggerTo([scene[0].sock, scene[1].sock, scene[2].sock, scene[3].sock], 1, {
cycle: {
x: function(i) {
return '+=' + 120 * i
}
},
ease: Elastic.easeOut.config(2, 3)
}, 0.02), 0.7)
tl.add(TweenMax.staggerTo([scene[3].sock, scene[2].sock, scene[1].sock, scene[0].sock], 0.5, {
autoAlpha: 0,
x: '+=50',
ease: Back.easeOut.config(0.9, 2)
}, 0.1), 2)
tl.add(TweenMax.staggerTo([dotline1, dotline2], 1, {
scaleX: 0.5,
autoAlpha: 0,
transformOrigin: '100% 50%',
ease: Back.easeOut.config(0.9, 2)
}, 0.1), 2.25)
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="//dev.hoasting.net/_tim-codepen/gsap/plugins/DrawSVGPlugin.js"></script>
$midnight-express: #20283B;
$sinbad: #A5D0CF;
$valencia: #DE4E37;
$white: #fff;
body {
background-color: rgba($sinbad, 1);
background-size: cover;
}
svg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0.5);
transform-origin: 50% 50%;
width: 500px;
height: 500px;
backface-visibility: hidden;
// border: 1px solid red;
}
.base,
.top,
.stripe {
stroke-width: 3;
stroke: $valencia;
fill: none;
}
.top {
fill: $white;
}
.dot1,
.dot2,
.dot3 {
fill: $valencia;
}
.white .base {
fill: $white;
}
#snow {
animation: snow 10s linear infinite;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: none;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49306/snow.png');
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.