Connections

connections.markdown

Connections

Connections animation was made using PUG, SASS & JS for the 5 lines of HTML, CSS & JS challenge.

A Pen by MenSeb on CodePen.

License.

index.pug

// 1 - README : TWEAK ANY VARIABLES BELOW TO UPDATE THE ANIMATION 
- const length = 25, size = 1, time = 5000, dist = 100; // 2 - DECLARATIONS
<!-- 3 - LIST --><ul style="--t: #{time}; --s: #{size}; --d: #{dist};"> 
- for (let i = length + 1; i > 0; i--) // 4 - FOR LOOP
<!-- 5 - ITEMS --><li/>

script.js

/* DECLARATIONS CONST */ const { body } = document, list = body.querySelector('ul'), items = Array.from(list.querySelectorAll('li')), ref = items[0], { length } = items, t = +list.style.getPropertyValue('--t'), d = +list.style.getPropertyValue('--d');
/* DECLARATIONS LET */  let cX, cY, pts = items.map(pt => ({ pt }));
/* HELPERS OBJ */ const { B, O, C, L, P, R, S, T, V } = { B: t => t.getBoundingClientRect(), O: t => { const { x, y, height: h, width: w } = B(t); return { x: x + w * .5, y: y + h *.5 } }, R: n => Math.random() * n, S: (t, s) => t.style.cssText = s, P: _ => ({ X: R(100), Y: R(100) }), L: (x, y) => Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)), T: (x, y) => Math.atan2(y, x), V: (d, dX, dY) => Math.abs(dX) < d && Math.abs(dY) < d, C: (pt, d, cX, cY) => { const { x, y } = O(pt), dX = x - cX, dY = y - cY; return { dX, dY, dV: V(d, dX, dY) }; } }
/* LOGIC OBJ */ const { animate, connect, init, move, track } = { move: _ => pts = pts.map(({ pt }) => { return { pt, ...P() } } ), track: _ => { const { x, y } = O(ref); return { cX: x, cY: y } }, connect: _ => pts.forEach(({ pt, X, Y }, index) => { const { dV, dX, dY } = C(pt, d, cX, cY); S(pt, `--X: ${X}; --Y: ${Y}; ${dV && index > 0 ? `--L: ${L(dX, dY)}; --T: ${T(dX, dY)}` : ''}`); pt.className = dV && index > 0 ? 'C' : ''; }), animate: () => { ({ cX, cY } = track()); S(body, `--cX: ${cX}; --cY: ${cY}`); connect(); requestAnimationFrame(animate); }, init: () => { move(); setTimeout(move, 250); setInterval(move, t); requestAnimationFrame(animate); } }
/* INIT CALL */ init();

style.scss

/* 1 - DECLARATIONS */ $size: calc(#{var(--s)} * 1vmin); $half: calc(#{$size} / 2); $size-ref: calc(#{$size} * 2.5); $size-link: calc(#{$size} * 1.75); $ratio: calc(#{$size} * .25); $time: calc(#{var(--t)} * 1ms); $c1: #032d3c; $c2: #4be3ac; $c3: #94fc13; $c4: #f7ff56; @keyframes fade-in { 0%, 50% { opacity: 0 } 100% { opacity: 1 } }; @keyframes fade-bg { 0%, 50% { background: transparent } 100% { background: rgba($c2, .5) } };
/* 2 - RESET */ *, *::before, *::after { margin: 0; border: 0; padding: 0; box-sizing: border-box; }
/* 3 - BODY */ body { li { &.C { height: $size-link; width: $size-link; background: $c3; &::after { content: ''; } } } }
/* 4 - LIST */ ul { z-index: 0; height: 100vh; width: 100vw; list-style: none; background: $c1; overflow: hidden; position: relative; animation: fade-in 1s ease-in-out; }
/* 5 - ITEMS */ li { position: absolute; left: calc(-1 * #{$half} + #{var(--X)} * 1%); top: calc(-1 * #{$half} + #{var(--Y)} * 1%); transition: left $time, top $time, width .1s, height .1s, background .1s; transition-timing-function: ease-in-out; border-radius: 50%; height: $size; width: $size; background: scale-color($c3, $lightness: 80%, $alpha: -20%); &:first-child { z-index: 1; height: $size-ref; width: $size-ref; background: $c4; } &::after { z-index: -1; display: block; height: $ratio; width: calc(#{var(--L)} * 1px); position: absolute; border-radius: $ratio; right: 50%; top: calc(50% - #{$ratio} / 2); transform-origin: right; animation: fade-bg .1s ease-in-out forwards; transform: rotate3d(0, 0, 1, calc(#{var(--T)} * 1rad)); } }