In the fast-paced tech startup world, conveying multiple key messages dynamically can make all the difference in capturing attention. At Polar Hedgehog, we’ve worked with numerous tech startups where adding rotating text animations became essential for communicating core values, services, or product features.

What You’ll Create

This tutorial will guide you through creating a scramble text animation in Webflow. The text will cycle through multiple words or phrases with a shuffling effect, perfect for hero sections or call-to-action areas.

Here’s a sneak peek of the effect, recently created for our clients at Node.Monster.

Step 1: Set Up Your Webflow Project

1. Add a Text Element:
   
   
   • Drag a text block onto your Webflow canvas.
   • Assign it the class shuffle-text so the script can target it.
     ‍
2. Design Your Element:
   
   
   • Style the text to match your site’s branding (font, size, color, etc.).

Step 2: Add the Script

Here’s the script you’ll use. This is designed as a template, allowing you to easily update the placeholder words and characters to fit your needs:

 
<!-- Rotating Scramble Text Animation -->
<script>
  const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()";
  const words = ["Placeholder1", "Placeholder2", "Placeholder3", "Placeholder4"]; // Replace with your own words
  const transitionDuration = 1000; // Total duration of each transition in milliseconds
  const intervalTime = 40; // Time interval for character changes
  let currentIndex = 0;

  document.addEventListener("DOMContentLoaded", () => {
    const targetElement = document.querySelector(".scrumble-text");

    if (!targetElement) {
      console.error("Element with class 'scrumble-text' not found.");
      return;
    }

    const startShuffling = () => {
      let iteration = 0;
      const nextValue = words[currentIndex];
      currentIndex = (currentIndex + 1) % words.length;

      const totalIntervals = transitionDuration / intervalTime;
      const incrementPerInterval = nextValue.length / totalIntervals;

      const interval = setInterval(() => {
        targetElement.innerText = nextValue
          .split("")
          .map((letter, index) => {
            if (index < Math.floor(iteration)) return nextValue[index];
            if (index >= nextValue.length) return "";
            return letters[Math.floor(Math.random() * letters.length)];
          })
          .join("");

        if (iteration >= nextValue.length) {
          clearInterval(interval);
          setTimeout(startShuffling, 3000);
        }

        iteration += incrementPerInterval;
      }, intervalTime);
    };

    startShuffling();
  });
</script>
 

Step 3: Customize the Script

• Words: Replace "Placeholder1", "Placeholder2", etc., in the words array with your desired terms.
• Characters: Update the letters string to include symbols or letters specific to your brand style.
• Speed: Adjust transitionDuration and intervalTime for faster or slower effects.

Step 4: Publish and Test

1. Add the script before </body> in the Page Settings.
2. Publish your Webflow project and view it live.
3. Watch as your text seamlessly rotates through your selected words, creating a captivating animation.

Case Study: Node.Monster

One of our recent clients, Node.Monster, required a way to communicate the breadth of their expertise and services to a highly technical audience. Node.Monster has established itself as a team of blockchain pioneers and experts with a legacy that traces back to the creation of Colored Coins, a foundational technology in the blockchain space.

Their mission—succinctly captured in their H1 “Powering Networks With Trusted {Nodes}”—underscores their dedication to empowering blockchain ecosystems with the infrastructure and resources needed to thrive.

To amplify this message, we integrated the scramble text animation into their website’s hero section, dynamically cycling through key terms that encapsulate their services: “Nodes,” “Hubs,” “Grants,” and “Tools.”

This animation not only adds a visually engaging element but also reinforces their messaging by dynamically cycling through their core values, making it both memorable and impactful.

Conclusion

Adding a scramble text animation to your Webflow site is a simple yet effective way to enhance user engagement. Whether you’re showcasing your product features, core values, or services, this technique ensures your message stands out.

Need help with implementation or other Webflow design challenges? Contact Us—we’d love to help bring your vision to life.