michalvankodev-site/templates/assets/animated_logo.html
Michal Vanko 5a1fb0c5f9
Some checks failed
test / cargo test (push) Failing after 1m24s
added logo bg pulsing effect
2025-03-13 22:40:21 +01:00

82 lines
2.7 KiB
HTML

{% include "icons/m-logo-animated.svg" %}
<script src="/resources/anime.min.js"></script>
<script>
var svg = document.getElementById("m-logo")
svg.setAttribute("visibility", "visible");
var borderTimeline = anime.timeline({
duration: 2000,
easing: 'easeInOutSine',
})
borderTimeline.add({
targets: '#m-logo #border-start',
strokeDashoffset: [anime.setDashoffset, -310],
duration: 2000,
easing: 'easeOutExpo',
begin: (animation) => {
const target = animation.animatables[0].target
target.setAttribute("visibility", "visible")
}
}, 0)
borderTimeline.add({
targets: '#m-logo #m-letter-start',
strokeDashoffset: [anime.setDashoffset, -447.4],
easing: 'easeOutExpo',
duration: 2000,
begin: (animation) => {
const target = animation.animatables[0].target
target.setAttribute("visibility", "visible")
}
}, 0)
borderTimeline.add({
targets: '#m-logo #border',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 2000,
complete: (animation) => {
//debugger;
const target = animation.animatables[0].target
target.setAttribute("fill", "url('#bg-gradient')")
var bgAnimationTimeline = anime.timeline()
bgAnimationTimeline.add({
targets: '#m-logo #bg-gradient #bg-stop',
offset: "0%",
stopColor: "rgba(216, 246, 255, 0.8)",
easing: 'easeInQuint',
duration: 123,
})
bgAnimationTimeline.add({
targets: '#m-logo #bg-gradient #bg-stop',
offset: "100%",
easing: 'easeOutExpo',
duration: 333,
complete: (animation) => {
const target = animation.animatables[0].target
target.setAttribute("stop-color", "rgba(216, 246, 255, 0.8)")
anime({
targets: '#m-logo #bg-gradient #bg-stop',
stopColor: "rgba(216, 246, 255, 0.3)",
easing: 'easeOutQuad',
duration: 3333,
direction: 'alternate',
loop: true,
});
}
})
}
}, 160)
borderTimeline.add({
targets: '#m-logo #m-letter',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1800,
}, 160)
borderTimeline.add({
targets: '#m-logo #m-letter',
easing: 'easeInOutSine',
duration: 333,
fill: "#32a8eb",
strokeWidth: "0",
})
</script>