How to integrate this JS animation into Webflow

Design help Custom code
2

  1. Add the js before the body.
    Custom code in head and body tags | Webflow University

  2. Add canvas (custom HTML - no canvas element by drag-&-drop):
    Custom code | Webflow University

  3. CSS - be careful from CSS conflicts (don’t copy and paste the CSS code for H1/html and so on - add styles from webflow editor)

  4. add div - wrapper for style (bg color - flexbox align for h1/p and so on):
    wrapper
    — canvas
    — h1
    — p
    /wrapper

That’s it. It will work only on you’re publish site (not in preview mode).

How to edit this code - the size of the canvas set by JS :slight_smile:

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

The colors of line and dot:

ctx.fillStyle = "#8f9aa3";

How to destroy this code :slight_smile: if you remove h1 - you must edit the code (the counter).
change selector:

You add class/id by weblow editor.

If you dont want the text animation (work with static/regular text on top of this canvas) - this is the code:

var canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");

var TAU = 2 * Math.PI;

var output = document.querySelector("h1");

times = [];
function loop() {
  var startTime = performance .now();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  update();
  draw();
  times.push(performance.now() - startTime);
  if (times.length > 500) {
    times.shift()
  }
  requestAnimationFrame(loop);
}

function Ball (startX, startY, startVelX, startVelY) {
  this.x = startX || Math.random() * canvas.width;
  this.y = startY || Math.random() * canvas.height;
  this.vel = {
    x: startVelX || Math.random() * 2 - 1,
    y: startVelY || Math.random() * 2 - 1
  };
  this.update = function(canvas) {
    if (this.x > canvas.width + 50 || this.x < -50) {
      this.vel.x = -this.vel.x;
    }
    if (this.y > canvas.height + 50 || this.y < -50) {
      this.vel.y = -this.vel.y;
    }
    this.x += this.vel.x;
    this.y += this.vel.y;
  };
  this.draw = function(ctx, can) {
    ctx.beginPath();
    if (distMouse(this) > 100) {
      ctx.fillStyle = "#8f9aa3";
      ctx.globalAlpha =  .2;
    } else {
    	ctx.fillStyle = '#448fda';
      ctx.globalAlpha =  .6;
    }
    ctx.arc((0.5 + this.x) | 0, (0.5 + this.y) | 0, 3, 0, TAU, false);
    ctx.fill();
  }
}

var balls = [];
for (var i = 0; i < canvas.width * canvas.height / (65*65); i++) {
  balls.push(new Ball(Math.random() * canvas.width, Math.random() * canvas.height));
}

var lastTime = Date.now();
function update() {
  var diff = Date.now() - lastTime;
  for (var frame = 0; frame * 16.6667 < diff; frame++) {
    for (var index = 0; index < balls.length; index++) {
      balls[index].update(canvas);
    }
  }
  lastTime = Date.now();
}
var mouseX = -1e9, mouseY = -1e9;
document.addEventListener('mousemove', function(event) {
  mouseX = event.clientX;
  mouseY = event.clientY;
});

function distMouse(ball) {
  return Math.hypot(ball.x - mouseX, ball.y - mouseY);
}

function draw() {
  for (var index = 0; index < balls.length; index++) {
    var ball = balls[index];
    ball.draw(ctx, canvas);
    ctx.beginPath();
    for (var index2 = balls.length - 1; index2 > index; index2 += -1) {
      var ball2 = balls[index2];
	var dist = Math.hypot(ball.x - ball2.x, ball.y - ball2.y);
        if (dist < 100) {
          if (distMouse(ball) > 100) {
            ctx.strokeStyle = "#8f9aa3";
          	ctx.globalAlpha = .2;
          } else {
            ctx.strokeStyle = '#448fda';
            ctx.globalAlpha =  .6;
          }
          ctx.lineWidth = "2px";
          ctx.moveTo((0.5 + ball.x) | 0, (0.5 + ball.y) | 0);
          ctx.lineTo((0.5 + ball2.x) | 0, (0.5 + ball2.y) | 0);
        }
}
    ctx.stroke();
  }
}

// Start
loop();

particles.js

full js libary for this idea (more options)

the same steps only add CDNs.min before body + follow this docs: GitHub - VincentGarreau/particles.js: A lightweight JavaScript library for creating particles