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!

All versions