Evolving eBay- A Color Transition Over Time

·1 min read
Priya Jain

Priya Jain

@priyajaindev

Evolving eBay- A Color Transition Over Time

The transition from yellow to white is a visual transformation that unfolded over the course of a year.

Transition Backstory

If you faintly remember, eBay once had a website, which had yellow as its background colour. This visual might remind you of it. So suddenly as the brand was revamping, they changed the yellow to white. What happened next was not expected! There were thousands and thousands of mails hitting the mailbox about why the company changed the background colour! Now it seems so obvious that white is the better choice, but back then, it was a change for the users, a change that they weren’t ready to accept!

The idea of narrating this event is that user’s are never welcoming to change, they have to be shaped into change.

Technical Implementation:

  <div id="block"></div>

Create an Array of Colors: The code creates an array of different colors that gradually change from the initial color (yellow) to the target color (white). It does this by adjusting the blue component of the color.

 function startTransition() {
    // Get the element
    const element = document.getElementById("block");
 
    // Define the target color (white)
    const targetColor = "rgb(255, 255, 255)";
 
    const colors = [];
    let b = 204;
    for (let i = 0; i <= 60; i++) {
      if (i % 6 === 0) {
        b += 1;
      } else {
        b += 0.8; //random value so that last value will be 255
      }
      colors.push(`rgb(255, 255, ${Math.round(b)})`);
    }
 
    // Total duration: 60 seconds (1 minute), with a change every second
    const totalDuration = 60 * 1000; // 60,000 milliseconds
    const transitionDuration = totalDuration / colors.length;
 
    let colorIndex = 0;
    let startTime = null;
 
    function updateColor(timestamp) {
      if (!startTime) startTime = timestamp;
 
      const elapsed = timestamp - startTime;
 
      if (colorIndex < colors.length) {
        element.style.backgroundColor = colors[colorIndex];
 
        if (elapsed >= transitionDuration) {
          colorIndex++;
          startTime = null;
        }
 
        requestAnimationFrame(updateColor);
      } else {
        element.style.backgroundColor = targetColor;
      }
    }
 
    // Start the color transition
    requestAnimationFrame(updateColor);
  }

This code initiates a gradual transition from yellow to white, symbolizing eBay's commitment to change and adapt to evolving user preferences.

The transition reminds us that change, even a simple one like a color switch, can take time for users to embrace fully.

Practicle Example