Font Size Issue Fix

$(document).ready(function () {
const elementId = window.effect1ElementId;
const fontSizeWidget = window.effectFontSize;
const targetElement = document.getElementById(elementId);
var maxDist;
var mouse = { x: 0, y: 0 };
var cursor = {
x: window.innerWidth,
y: window.innerHeight
};

Math.dist = function(a, b) {
var dx = b.x – a.x;
var dy = b.y – a.y;
return Math.sqrt(Math.pow(dx, 2), Math.pow(dy, 2));
}

window.addEventListener("mousemove", function(e) {
cursor.x = e.clientX;
cursor.y = e.clientY;
});

window.addEventListener("touchmove", function(e) {
var t = e.touches[0];
cursor.x = t.clientX;
cursor.y = t.clientY;
}, {
passive: false
});

var Char = function(container, char) {
var span = document.createElement("span");
span.setAttribute('data-char', char);
span.innerText = char;
container.appendChild(span);
this.getDist = function() {
this.pos = span.getBoundingClientRect();
return Math.dist(mouse, {
x: this.pos.x + (this.pos.width / 1.75),
y: this.pos.y
});
}
this.getAttr = function(dist, min, max) {
var wght = max – Math.abs((max * dist / maxDist));
return Math.max(min, wght + min);
}
this.update = function(args) {
var dist = this.getDist();
this.wdth = args.wdth ? ~~this.getAttr(dist, 5, 200) : 100;
this.wght = args.wght ? ~~this.getAttr(dist, 100, 800) : 400;
this.alpha = args.alpha ? this.getAttr(dist, 0, 1).toFixed(2) : 1;
this.ital = args.ital ? this.getAttr(dist, 0, 1).toFixed(2) : 0;
this.draw();
}
this.draw = function() {
var style = "";
style += "opacity: " + this.alpha + ";";
style += "font-variation-settings: 'wght' " + this.wght + ", 'wdth' " + this.wdth + ", 'ital' " + this.ital + ";";
span.style = style;
}
return this;
}

var VFont = function() {
this.scale = false;
this.flex = false;
this.alpha = false;
this.stroke = false;
this.width = true;
this.weight = true;
this.italic = false;
var title, str, chars = [];
var hovered = false;

this.init = function() {
var widget = document.getElementById(elementId);
if (!widget) return;

title = widget.querySelector("h1");
str = title.innerText;
title.innerHTML = "";

for (var i = 0; i < str.length; i++) {
var _char = new Char(title, str[i]);
chars.push(_char);
}

this.set();

// Add hover event listeners
title.addEventListener("mouseenter", () => hovered = true);
title.addEventListener("mouseleave", () => hovered = false);

window.addEventListener("resize", this.setSize.bind(this));
}

this.set = function() {
title.className += this.flex ? " flex variable-font-content" : "";
title.className += this.stroke ? " stroke variable-font-content" : "";
this.setSize();
}

this.setSize = function() {
// var fontSize = window.innerWidth / (str.length / 2.7);

var fontSize = fontSizeWidget
title.style = "font-size: " + fontSize + "px;";
if (this.scale) {
var scaleY = (window.innerHeight / title.getBoundingClientRect().height).toFixed(2);
var lineHeight = scaleY * 0.8;
title.style = "font-size: " + fontSize + "; transform: scale(1," + scaleY + "); line-height: " + lineHeight + "em;";
}
}

this.animate = function() {
mouse.x += (cursor.x – mouse.x) / 4;
mouse.y += (cursor.y – mouse.y) / 4;

if (hovered) {
this.render();
}

requestAnimationFrame(this.animate.bind(this));
}

this.render = function() {
maxDist = title.getBoundingClientRect().width / 2;
for (var i = 0; i < chars.length; i++) {
chars[i].update({
wght: this.weight,
wdth: this.width,
ital: this.italic,
alpha: this.alpha
});
}
}

this.init();
this.animate();
return this;
}

var txt = new VFont();
});

})(jQuery);
When we use this
// var fontSize = window.innerWidth / (str.length / 2.7);
the effect working fine and font size increasing on mouse over
but when supply initial font size then effect working but font size not increased
var fontSize = fontSizeWidget

title.style = "font-size: " + fontSize + "px;";

This line **overwrites** all inline styles previously applied to the element — including the dynamic styles being applied via `span.style` for each character (inside `.draw()` method). So, even though the characters are updating with variation settings, the `font-size` may not respond correctly due to how it's handled in the DOM.

—

### ✅ Fix

Instead of setting `title.style` as a string, **use `style.fontSize`** and **preserve other styles**:

this.setSize = function() {
    var fontSize = fontSizeWidget; // or calculate dynamically
    title.style.fontSize = fontSize + "px";

    if (this.scale) {
        var scaleY = (window.innerHeight / title.getBoundingClientRect().height).toFixed(2);
        var lineHeight = scaleY * 0.8;
        title.style.transform = "scale(1," + scaleY + ")";
        title.style.lineHeight = lineHeight + "em";
    } else {
        title.style.transform = "";
        title.style.lineHeight = "";
    }
}

—

### ✅ Why This Works

Using `title.style = "…"` **resets** all inline styles, which might interrupt the smooth application of variation fonts or scaling transforms dynamically applied to children.

—

### 💡 Optional Improvement

If you're still having issues with dynamic font growth during hover, ensure that your CSS doesn't constrain the title container with `overflow: hidden` or `fixed` height that could prevent visible growth.

Let me know if you'd like the hover effect to **animate** font size as well, based on distance, just like `wght` and `wdth`.