Transform letter by letter with custom Javascript

I’m trying to achieve an effect that, as soon as the page loads, makes every letter letter in some specific headings slightly different in size, rotation and moved on the x-axis. I don’t need this to be animated. It’s just a static layout. I managed to do that locally, with a code that looks kinda like this.

// Helper function to create spans for each character, including whitespace characters
function wrapCharacters(el) {
  const text = el.textContent;
  const characters = text.split('');
  const wrappedCharacters = characters
    .map(char => {
      if (char.trim() === '') {
        return `<span class="wiggle-whitespace">${char}</span>`; // Wrap whitespace characters
      } else {
        return `<span>${char}</span>`; // Wrap letters
  el.innerHTML = wrappedCharacters;

// Initialize wiggling effect for each letter
function initWiggling() {
  const header = document.querySelector('.wiggle-text');
  // Wrap each character in a span
  // Get the individual letter spans
  const letterSpans = header.querySelectorAll('span');
  // Function to get a random value within a range
  function getRandomValue(min, max) {
    return Math.random() * (max - min) + min;

  // Calculate and store random target values for each letter
  const targets = [];
  letterSpans.forEach((span, index) => {
    const targetTranslation = getRandomValue(-0.5, 0.5);
    const targetRotation = getRandomValue(-6.5, 6.5);
    const targetScale = getRandomValue(0.9, 1.1); // Random scale factor (adjust the range as needed)
    targets.push({ translation: targetTranslation, rotation: targetRotation, scale: targetScale }); = `translateX(${targetTranslation}px) rotateZ(${targetRotation}deg) scale(${targetScale})`;

// Linear interpolation function (lerp) for smooth animation
function lerp(start, end, amount) {
  return (1 - amount) * start + amount * end;

// Call the initWiggling function when the page loads
window.addEventListener('load', initWiggling);

Here’s a picture with the result that this code produces locally.

However, I cannot seem to achieve the same result within ReadyMag. I feel like I have a sufficient understanding of where to put the custom code and how to reference the data-id widgets and so on, however, it doesn’t work, even after many different iterations. Could some of you help me in figuring out what I’m missing?

Unfortunately can’t advise anything here. But we have an example for animating variable fonts