Skip to content

Instantly share code, notes, and snippets.

@leecrossley

leecrossley/index.html

Created April 16, 2025 23:14
Show Gist options
  • Save leecrossley/f259738917646546faabea00e1d01363 to your computer and use it in GitHub Desktop.
Save leecrossley/f259738917646546faabea00e1d01363 to your computer and use it in GitHub Desktop.
Download ZIP
VIMMA
Raw
index.html
<body>
<div class="banner">
<svg id="logo" width="578" height="116" viewBox="0 0 578 116" xmlns="http://www.w3.org/2000/svg">
<g id="logoPaths">
<!-- V -->
<path id="part1" class="logo-path" fill="#fff" d="M79 1v68l-3-4L34 1H1l7 11c15 20 28 41 42 61a6993 6993 0 0 0 30 43h28V1z" />
<!-- I stem -->
<path id="part2-stem" class="logo-path" fill="#fff" d="M121 100l28-41V23h-30v79l2-2z" />
<!-- I dot -->
<path id="part2-dot" class="logo-path" fill="#fff" d="M134 15c8 0 14-7 14-15h-29c0 8 7 15 15 15z" />
<!-- first M -->
<path id="part3" class="logo-path" fill="#fff" d="M275 47l1 49 25-37 4-5V0h-29l-4 6-39 58-1-64h-29a6850 6850 0 0 0-29 43l-43 61-7 12h33c15-21 28-43 42-64l4-5v68l1 1h26l2-1 23-36 18-29 2-3z" />
<!-- second M -->
<path id="part4" class="logo-path" fill="#fff" d="M384 0l1 63 40-57 4-6h28v116h-29V47l-2 3-18 29-23 36-2 1h-27l-1-1V47l-3 5-42 64h-33l7-12 42-61a6809 6809 0 0 1 30-43h28z" />
<!-- A -->
<path id="part5" class="logo-path" fill="#fff" d="M500 1h-31v115h29V48l3 4 41 64h36L500 1z" />
</g>
</svg>
</div>
</body>
</html>
Raw
script.js
document.addEventListener("DOMContentLoaded", () => {
const logoTimeline = anime.timeline({
autoplay: true,
loop: false,
direction: "alternate",
easing: "easeInOutQuad"
});
logoTimeline.add({
targets: "#part1",
translateX: [-200, 0],
opacity: [0, 1],
duration: 1000,
easing: "easeOutExpo"
});
logoTimeline.add(
{
targets: "#part2-stem",
translateY: [-150, 0],
opacity: [0, 1],
duration: 600,
easing: "easeOutExpo"
},
"-=600"
);
logoTimeline.add(
{
targets: "#part2-dot",
translateY: [-150, 0],
opacity: [0, 1],
duration: 600,
easing: "easeOutBounce"
},
"-=400"
);
logoTimeline.add(
{
targets: "#part3",
scale: [0, 1],
opacity: [0, 1],
duration: 900,
easing: "easeOutElastic(1, .6)"
},
"-=400"
);
logoTimeline.add(
{
targets: "#part4",
scale: [0, 1],
opacity: [0, 1],
duration: 900,
easing: "easeOutElastic(1, .8)"
},
"-=600"
);
logoTimeline.add(
{
targets: "#part5",
translateY: [150, 0],
rotate: [20, 0],
opacity: [0, 1],
duration: 800,
easing: "easeOutBack"
},
"-=700"
);
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
entry.isIntersecting ? logoTimeline.play() : logoTimeline.pause();
});
},
{ threshold: 0.5 }
);
observer.observe(document.getElementById("logo"));
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
Raw
style.css
body {
margin: 0;
height: 100vh;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
.banner {
margin-top: 5vh;
text-align: center;
}
svg#logo {
height: 10vh;
max-width: 90%;
overflow: visible;
}
.logo-path {
fill: #fff;
opacity: 0;
transform-box: fill-box;
transform-origin: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment