Get started with leader-line CDN
MIT licensed
Leader-line is a lightweight library that creates smooth, horizontal line animations for scrolling elements.
Tags:- leader
- line
- markup
- arrow
- attention
- highlight
- spotlight
- bubble
- svg
Stable version
Copied!
How to start using leader-line CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with leader-line CDN - cdnhub.io</title>
<style>
#path {
fill: none;
stroke: #000;
stroke-width: 2px;
}
</style>
</head>
<body>
<div id="line-container">
<div id="line-1">Line 1</div>
<div id="line-2">Line 2</div>
<div id="line-3">Line 3</div>
</div>
<script src="https://cdn.cdnhub.io/leader-line/1.0.7/leader-line.min.js"></script>
<script>
const container = document.getElementById('line-container');
const lines = Array.from(container.children);
const leaderline = new leaderline.Line(lines, {
color: '#000',
width: 2,
height: 20,
loop: false,
zIndex: 0,
startX: 0,
startY: 10,
endX: 0,
endY: 20,
path: document.getElementById('path')
});
leaderline.on('complete', function() {
console.log('Leaderline animation completed.');
});
leaderline.on('frame', function(data) {
lines.forEach(function(line, index) {
line.style.opacity = data.progress;
});
});
leaderline.on('enterframe', function() {
requestAnimationFrame(function() {
leaderline.next();
});
});
leaderline.start();
</script>
</body>
</html>
Copied!