Building Connection Line Animations Between Cities

Connection line animations between cities create engaging visual effects that show relationships, routes, and connections on maps. Whether you're visualizing flight paths, trade routes, or network connections, animated lines add movement and guide viewers' attention along paths.

In this guide, we'll explore how to build connection line animations between cities using SVG and CSS.

Why Animate Connection Lines?

Animated connection lines offer several benefits:

Visual interest — Adds movement to static maps
Route visualization — Shows paths clearly
Storytelling — Can tell stories through movement
Professional polish — Adds sophistication
User guidance — Guides attention along routes

Generate vector dotted maps

Create vector dotted maps with custom options and download them as SVG or PNG files

SVG Path Animation

Basic Line Draw

<svg class="map">
  <path class="connection-line" d="M100,200 Q300,100 500,200" 
        fill="none" stroke="#3b82f6" stroke-width="2" />
</svg>

.connection-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 2s ease-out forwards;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

Calculate Path Length

const path = document.querySelector('.connection-line');
const pathLength = path.getTotalLength();

path.style.strokeDasharray = pathLength;
path.style.strokeDashoffset = pathLength;
path.style.animation = `drawLine 2s ease-out forwards`;

Generate vector dotted maps

Create vector dotted maps with custom options and download them as SVG or PNG files

Multiple Connection Lines

Sequential Animation

function animateConnections(connections) {
  connections.forEach((connection, index) => {
    const path = document.querySelector(`.connection-${index}`);
    const pathLength = path.getTotalLength();
    
    path.style.strokeDasharray = pathLength;
    path.style.strokeDashoffset = pathLength;
    path.style.animation = `drawLine 1s ease-out ${index * 0.3}s forwards`;
  });
}

Staggered Reveal

.connection-line:nth-child(1) {
  animation-delay: 0s;
}

.connection-line:nth-child(2) {
  animation-delay: 0.3s;
}

.connection-line:nth-child(3) {
  animation-delay: 0.6s;
}

Animated Marker Along Path

Moving Dot

<svg class="map">
  <path id="route-path" d="M100,200 Q300,100 500,200" 
        fill="none" stroke="#3b82f6" stroke-width="2" />
  <circle class="moving-dot" r="5" fill="#ef4444">
    <animateMotion dur="3s" repeatCount="indefinite">
      <mpath href="#route-path" />
    </animateMotion>
  </circle>
</svg>

JavaScript Approach

function animateMarkerAlongPath(pathElement, markerElement, duration = 3000) {
  const pathLength = pathElement.getTotalLength();
  const startTime = performance.now();
  
  function animate(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const ease = easeInOutCubic(progress);
    
    const point = pathElement.getPointAtLength(pathLength * ease);
    markerElement.setAttribute('cx', point.x);
    markerElement.setAttribute('cy', point.y);
    
    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  }
  
  requestAnimationFrame(animate);
}

function easeInOutCubic(t) {
  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
}

Curved Connections

Bezier Curves

function createCurvedConnection(x1, y1, x2, y2) {
  const midX = (x1 + x2) / 2;
  const midY = (y1 + y2) / 2;
  const curveHeight = Math.abs(x2 - x1) * 0.3;
  
  return `M${x1},${y1} Q${midX},${midY - curveHeight} ${x2},${y2}`;
}

Great Circle Arcs

function createGreatCircleArc(lat1, lon1, lat2, lon2, points = 50) {
  const path = [];
  for (let i = 0; i <= points; i++) {
    const t = i / points;
    const lat = lat1 + (lat2 - lat1) * t;
    const lon = lon1 + (lon2 - lon1) * t;
    const { x, y } = latLonToXY(lat, lon);
    path.push(`${i === 0 ? 'M' : 'L'}${x},${y}`);
  }
  return path.join(' ');
}

Line Styles

Dashed Animation

.connection-line {
  stroke-dasharray: 10 5;
  animation: dashMove 1s linear infinite;
}

@keyframes dashMove {
  to {
    stroke-dashoffset: 15;
  }
}

Gradient Stroke

<defs>
  <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0" />
    <stop offset="50%" style="stop-color:#3b82f6;stop-opacity:1" />
    <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:0" />
  </linearGradient>
</defs>

<path class="connection-line" stroke="url(#lineGradient)" />

Animated Gradient

function animateGradient() {
  const gradient = document.querySelector('#lineGradient');
  let offset = 0;
  
  function update() {
    offset = (offset + 1) % 100;
    gradient.querySelector('stop:first-child').setAttribute('offset', `${offset}%`);
    gradient.querySelector('stop:last-child').setAttribute('offset', `${offset + 10}%`);
    requestAnimationFrame(update);
  }
  
  update();
}

Performance Optimization

Use CSS When Possible

/* Good - CSS animation */
.connection-line {
  animation: drawLine 2s ease-out;
}

/* Avoid - JavaScript if CSS can do it */

Limit Simultaneous Animations

function animateConnectionsSequentially(connections, delay = 300) {
  connections.forEach((connection, index) => {
    setTimeout(() => {
      animateConnection(connection);
    }, index * delay);
  });
}

Optimize Path Complexity

function simplifyPath(path, tolerance = 2) {
  // Use path simplification algorithm
  // Reduces points while maintaining shape
  return simplifiedPath;
}

Best Practices

Timing

Appropriate duration — 1-3 seconds typically
Smooth easing — Use ease-out or ease-in-out
Not too fast — Allow viewers to follow
Consistent timing — Uniform across lines

Visual Design

Appropriate thickness — Visible but not overwhelming
Good contrast — Stands out from map
Color choice — Meaningful colors
Clear paths — Obvious connections

Performance

Limit animations — Don't animate too many simultaneously
Use CSS — When possible instead of JavaScript
Optimize paths — Simplify complex paths
Test performance — Check on various devices

Common Patterns

Route Visualization

Draw routes — Show travel paths
Sequential reveal — One route at a time
Moving markers — Animate along routes
Complete journey — Full route display

Network Connections

Show connections — Display relationships
Staggered animation — Sequential reveal
Connection strength — Thickness or color
Network visualization — Complete network

Data Flow

Show data flow — Animate data movement
Direction indicators — Show flow direction
Flow intensity — Visualize volume
Dynamic updates — Change with data

Final Thoughts

Building connection line animations between cities creates engaging visual effects that show relationships, routes, and connections on maps. Whether drawing routes, animating markers along paths, or creating network visualizations, animated lines add movement and guide attention.

Start with clean SVG paths, implement smooth drawing animations, and optimize for performance. The result is professional map animations that effectively visualize connections and routes.

Ready to animate connection lines? Generate your dotted map and start creating connection line animations today.

See all posts