COMMS Animation suggestions

You can achieve the same animation of moving the comms// logo from the center of the screen to the navbar purely with CSS transitions and keyframes, which often results in smoother and cleaner animations.

Here’s how you can refactor it to work with CSS, minimizing the need for JavaScript manipulation:

Steps:

CSS Setup: We’ll use a class to trigger the animation and control the movement of the element using transform. Initially, the comms// text will be centered, and after the typing effect completes, we will add a class to animate the transition to the navbar.
JavaScript: The JavaScript will only need to add a class after the typing is done, triggering the CSS transition.

Updated Code

1. CSS:

/* Initial state for the logo in the center */
#js-typing {
  font-family: "roboto mono";
  font-size: 200px;
  font-weight: 800;
  font-style: normal;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centering the element */
  transition: transform 1s ease-in-out, top 1s ease-in-out, left 1s ease-in-out; /* Smooth transition */
}
 
/* After typing is done, move the element to the navbar */
.move-to-navbar {
  top: 10px; /* Adjust to match the navbar position */
  left: 20px; /* Adjust to match the navbar position */
  transform: scale(0.5) translate(0, 0); /* Scale down and remove centering */
}

2. JavaScript:

Update the JavaScript to simply add the class .move-to-navbar after the typing effect finishes. This will trigger the CSS transition.

document.addEventListener('DOMContentLoaded', function () {
    const userPageElement = document.getElementById('user-page');
    const element = document.getElementById('js-typing');
    const text = element.textContent;
 
    element.textContent = ''; // Clear the text content initially
 
    const typingSpeed = 80;
    let index = 0;
 
    function typeNextCharacter() {
        if (index < text.length) {
            element.textContent += text.charAt(index);
            index++;
            setTimeout(typeNextCharacter, typingSpeed);
        } else {
            element.textContent = text;
            // Add the CSS class to move the element after typing
            element.classList.add('move-to-navbar');
            userPageElement.classList.remove('hide');
            userPageElement.classList.add('show-animation');
        }
    }
 
    typeNextCharacter();
});

How This Works:

CSS Positioning:
- Initially, the js-typing element is centered on the screen using position: absolute; and transform: translate(-50%, -50%).
CSS Transition:
- The transition property is applied to transform, top, and left, so any changes in these values will result in a smooth transition.
JavaScript:
- The JavaScript code handles the typing effect, and when the typing is complete, it adds the .move-to-navbar class to the js-typing element.
CSS Class Trigger:
- When the .move-to-navbar class is added, the element’s top and left properties shift to the navbar’s position (you can adjust these values to perfectly align with your navbar) and the scale(0.5) reduces the size of the text.
- The transition automatically applies a smooth animation as the element moves and scales to its final position.

Key Adjustments:

You may need to tweak the values for top and left in the .move-to-navbar class to match the exact position of your navbar.
Adjust the transform: scale(0.5) value if you need a different final size for the text in the navbar.

This approach is much simpler than cloning and manually manipulating the DOM, and it leverages CSS transitions for a smooth, declarative animation. Would you like help with further adjustments or testing?

🪴 TJ's Notes 1.0

Explorer