70 lines
2.2 KiB
HTML
70 lines
2.2 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, 1)",
|
|
easing: 'easeInQuint',
|
|
duration: 123,
|
|
})
|
|
bgAnimationTimeline.add({
|
|
targets: '#m-logo #bg-gradient #bg-stop',
|
|
offset: "100%",
|
|
easing: 'easeOutExpo',
|
|
duration: 333,
|
|
})
|
|
}
|
|
}, 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>
|