Sun Header With Rising Logo Bouncing Letters Using Trig.js ☀️

Ever wanted to create a stunning animated header where each letter bounces into place as you scroll? With Trig.js, you can achieve this effect effortlessly! 🎉

Check out the live example here:

How It Works 🛠️

This example features a sunrise-inspired header where:

• The background sun scales and rotates dynamically.
• Each letter in the Trig.js logo rises as you scroll.

We use Trig.js to smoothly control the scroll animations. The key part of the effect is how we selectively apply the .selected class to each letter based on the scroll position.

The JavaScript Magic ✨

function checkTrig() {
  const element = document.querySelector("header");
  const trigValue = parseFloat(
    getComputedStyle(element).getPropertyValue("--trig")
  );

  const letters = document.querySelectorAll(".letter");
  const index = Math.min(
    Math.max(Math.floor((trigValue - 50) / 10), 0),
    letters.length
  );

  letters.forEach((letter, i) => {
    if (i === index) {
      letter.classList.add("selected");
    } else {
      letter.classList.remove("selected");
    }
  });

  requestAnimationFrame(checkTrig);
}

checkTrig();

Breaking It Down 🔍

• trigValue is retrieved from the --trig CSS variable, which updates dynamically based on scroll.
• We calculate an index to determine which letter should rise based on trigValue.
• Only one letter at a time gets the .selected class, creating a smooth wave-like effect.

The CSS Magic 🎨

.letter {
  display: inline-block;
  transition: transform ease-out 0.3s;
}

.letter.selected {
  transform: translateY(-30px);
}

This ensures that when a letter gets the .selected class, it rises smoothly! 🕊️

Try It Out 🚀

Want to explore more? Check out the full Trig.js repository here:

🔗 Trig.js GitHub Repo

Let me know what you think or if you have any ideas for improvements! Happy coding! 🎨✨