Skip to content

Instantly share code, notes, and snippets.

@simonw

simonw/rotating-emoji-globe.html

Created July 19, 2023 23:48
Show Gist options
  • Save simonw/c3ab94911f42bbd0822ca4e61eb8424e to your computer and use it in GitHub Desktop.
Save simonw/c3ab94911f42bbd0822ca4e61eb8424e to your computer and use it in GitHub Desktop.
Download ZIP
Rotating emoji globe
Raw
rotating-emoji-globe.html
<!DOCTYPE html>
<html>
<head>
<title>Globe Emoji Animation</title>
<style>h1 { font-size: 70vh; text-align: center; padding: 0; margin: 0 }</style>
</head>
<body>
<h1>🌎</h1>
<script>
const globeEmojis = ['🌎', '🌍', '🌏'];
const h1 = document.querySelector('h1');
let i = 0;
setInterval(() => {
h1.innerHTML = globeEmojis[i++ % globeEmojis.length];
}, 500);
</script>
</body>
</html>
@johncmunson
Copy link

Neato. Here's same thing in a React component.

import React, { useState, useEffect } from "react";

export const RotatingGlobe = (props: { className?: string }) => {
  const globeEmojis = ["🌎", "🌍", "🌏"];
  const [currentGlobe, setCurrentGlobe] = useState(globeEmojis[0]);

  useEffect(() => {
    let i = 0;
    const interval = setInterval(() => {
      setCurrentGlobe(globeEmojis[i++ % globeEmojis.length]);
    }, 1000);

    return () => clearInterval(interval); // Cleanup interval on unmount
  }, []);

  return <div className={`${props.className}`}>{currentGlobe}</div>;
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment