Skip to content

Instantly share code, notes, and snippets.

@kcmr

kcmr/index.html

Created March 18, 2018 02:25
Show Gist options
  • Save kcmr/0ad034deb2a67de4396b10adcbf6d5dd to your computer and use it in GitHub Desktop.
Save kcmr/0ad034deb2a67de4396b10adcbf6d5dd to your computer and use it in GitHub Desktop.
Download ZIP
VSCode logo loading animation with Anime.js
Raw
index.html
<svg width="160" height="160" viewBox="0 0 160 160" class="vscode-logo">
<g>
<path class="p1" d="M 3 115 L 3 115 L 16 120 L 16 120 L 3 115 Z"></path>
<path class="p2" d="M 112 6 L 148 21 L 148 21 L 112 6 L 112 6 Z"></path>
<path class="p3" d="M 148 135 L 112 152 L 112 152 L 148 135 L 148 135 Z"></path>
</g>
</svg>
Raw
script.js
const timeline = anime.timeline({
loop: true,
duration: 450,
easing: 'easeInOutQuart'
});
timeline
.add({ targets: '.p1', d: { value: 'M 3 115 L 112 6 L 148 21 L 16 120 L 3 115 Z', delay: 400 }})
.add({ targets: '.p2', d: { value: 'M 112 6 L 148 21 L 150 136 L 112 152 L 112 6 Z' }})
.add({ targets: '.p3', d: { value: 'M 148 135 L 112 152 L 3 43 L 17 37 L 148 135 Z' }})
.add({ targets: '.p3', d: { value: 'M 148 135 L 112 152 L 112 152 L 148 135 L 148 135 Z', delay: 400 }})
.add({ targets: '.p2', d: { value: 'M 112 6 L 148 21 L 148 21 L 112 6 L 112 6 Z' }})
.add({ targets: '.p1', d: { value: 'M 3 115 L 3 115 L 16 120 L 16 120 L 3 115 Z' }});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
Raw
style.css
body {
display: flex;
height: 100vh;
background-image: linear-gradient(136deg, #27a0b0 0%, #5477d4 52%, #a85dff 100%);
}
.vscode-logo {
fill: #fff;
margin: auto;
}
Raw
vscode-logo-loading-animation-with-anime-js.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment