Code Playground

console.log("Event Fired")
(function () {
  const element = document.querySelector(".neon__light");
  const svg = document.querySelector("svg");

let mouse = {
    x: 0,
    y: 0
  };
  let screen = {
    w: window.innerWidth,
    h: window.innerHeight
  };
  let wrapper;
  updateViewBox();
  drawSparkler();

let mouseStored = Object.assign({}, mouse);

gsap.set(element, { transformOrigin: "${size}0% ${size}0%" });

// Set event listeners
  window.addEventListener("mousemove", function (e) {
    setMouseCoords(e);
  });
  window.addEventListener("resize", function (e) {
    updateVariables(e);
  });

// And use the ticker to update the SVG
  gsap.ticker.add(animate);

function updateVariables(event) {
    screen = {
      w: window.innerWidth,
      h: window.innerHeight
    };
    updateViewBox();
  }

function updateViewBox() {
    svg.setAttribute("viewBox", `0 0 ${screen.w} ${screen.h}`);
  }

function setMouseCoords(event) {
    mouse.x = event.clientX;
    mouse.y = event.clientY;
  }

function animate() {
    if (mouseStored.x === mouse.x && mouseStored.y === mouse.y) return;

let xPercent = getPercentage(mouse.x, screen.w) - 50;
    let yPercent = getPercentage(mouse.y, screen.h) - 50;

// mouse animation here
    gsap.to(wrapper, {
      ease: "linear",
      yPercent: yPercent * 0.75,
      x: xPercent * 0.75,
      rotation: -xPercent * Math.abs(yPercent) * 0.01
    });

// Store the mouse position for the next tick
    mouseStored.x = mouse.x;
    mouseStored.y = mouse.y;
  }

function drawSparkler() {
    let h = screen.h * 0.2;
    let offsetY = ((screen.h - h) / 2) * 1.2;
    let sparkW = h * 0.3;

let density = 25;

wrapper = document.createElementNS("http://www.w3.org/2000/svg", "g");
    wrapper.classList.add("sparkler");

let base = document.createElementNS("http://www.w3.org/2000/svg", "path");
    base.classList.add("sparkler__base");
    base.setAttribute("d", `M ${screen.w / 2} ${offsetY} v ${h}`);

let center = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "circle"
    );
    center.classList.add("sparkler__center");
    center.setAttribute("cx", screen.w / 2);
    center.setAttribute("cy", offsetY);
    center.setAttribute("r", sparkW * 1.1);

let head = document.createElementNS("http://www.w3.org/2000/svg", "g");
    head.classList.add("sparkler__head");

let sparks = [];

for (let i = 0; i < density; i++) {
      let stars = [];
      let noOfStars = getRandomInt(4);
      let spark = document.createElementNS("http://www.w3.org/2000/svg", "g");

for (let j = 0; j < noOfStars; j++) {
        let size = Math.random() * 10;

stars.push(star);
        spark.append(star);
      }

gsap.set(line, {
        drawSVG: "0% 0%"
      });
      gsap.set(stars, {
        opacity: 0
      });
      gsap.set(center, {
        transformOrigin: "50% 50%"
      });

// animation
      gsap.to(center, {
        scale: 0.2,
        ease: "linear",
        duration: 0.6,
        repeat: -1,
        yoyo: true
      });

gsap.to(line, {
        stagger: -1,
        duration: lineW / 300,
        ease: "linear",
        repeat: -1,
        keyframes: [
          {
            drawSVG: "0% 85%"
          },
          {
            drawSVG: "100% 100%"
          }
        ]
      });

gsap.to(stars, {
        repeat: -1,
        dration: 0.3,
        delay: lineW / 300,
        keyframes: [
          {
            scale: 0,
            opacity: 1,
            duration: 0.1
          },
          {
            x: "random(-30, 30)",
            y: "random(-30, 30)",
            rotation: "random(-90, -270)",
            scale: 1,
            opacity: 1,
            duration: (0.3 * lineW) / 75
          },
          {
            scale: 0,
            opacity: 0,
            duration: 0.1
          },
          {
            scale: 0,
            opacity: 0,
            duration: 0.1
          }
        ]
      });

spark.append(line);
      sparks.push(spark);

gsap.set(spark, {
        transformOrigin: "0% 50%",
        rotate: (360 / density) * i
      });
      gsap.set(wrapper, {
        transformOrigin: "50% 0%"
      });

head.append(spark);
    }

wrapper.append(base);
    wrapper.append(center);
    wrapper.append(head);

svg.append(wrapper);
  }

function minMax(value, min, max) {
    if (value < min) {
      return min;
    } else if (value > max) {
      return max;
    } else {
      return value;
    }
  }

function getRandomInt(max) {
    return Math.floor(Math.random() * max);
  }

function getPercentage(partial, total) {
    return (partial * 100) / total;
  }
})();

Frontend Forever App