DEV Community: Rodrigo Antunes

How to Recreate the Iconic Pegman from Google Maps

Rodrigo Antunes — Thu, 12 Dec 2024 16:54:02 +0000

This is a little snippet I’ve wanted to try for quite some time. I finally got around to recreating this iconic feature from Google Maps: the ability to drag and drop this little guy, known as Pegman, to switch to Street View.

TL;DR
Click and drag the little icon in the bottom-right corner over the map:

HTML

The structure is straightforward. I have:

A #map to serve as the container (with a background-image applied).
A #pegman-container positioned in the bottom-right corner.
The #pegman element itself for the draggable character.

<div id="map">
  <div id="pegman-container">
    <div id="pegman"> </div>
  </div>
</div>

CSS

Positioning everything is simple, as you can see in the source code above, but the most important part is the rotate property. This is dynamically updated using JavaScript:

#pegman {
  /* other styles */
  rotate: var(--r);
}

The rotate value changes based on user interaction, which we’ll dive into next.

Javascript

Everything here revolves around user interaction. JavaScript handles:

Listening for mouse events.
Updating Pegman’s position and rotation dynamically.
Adding smooth animations for better UX.

const pegman = document.querySelector('#pegman');
let isDragging = false;
let initialX = 0;
let initialY = 0;
let inactivityTimeout;
let lastX = 0;
const timeout = 25;
const maxDegrees = 50;

// Event listeners
pegman.addEventListener('mousedown', onMouseDown);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);

Let’s break down each function:

onMouseDown

This starts the drag by recording the initial mouse position and toggling the isDragging flag.

const onMouseDown = (e) => {
  isDragging = true;
  initialX = e.clientX;
  initialY = e.clientY;
};

onMouseMove

This handles Pegman’s movement and rotation during the drag. It ensures:

Rotation stays within a range (to avoid extreme angles like Superman flying).
The rotate value updates dynamically using --r.

const onMouseMove = (e) => {
  if (!isDragging) return;

  const dy = e.clientY - initialY;
  const dx = e.clientX - initialX;

  // Limit rotation range
  let rx = Math.max(-maxDegrees, Math.min(maxDegrees, dx - lastX));
  pegman.setAttribute('style', `--r: ${rx}deg`);

  // Animate Pegman's position
  pegman.animate({ translate: `${dx}px ${dy}px` }, {
    duration: 100,
    fill: 'forwards',
  });

  // Reset rotation after inactivity
  clearTimeout(inactivityTimeout);
  inactivityTimeout = setTimeout(() => {
    lastX = dx;
    pegman.setAttribute('style', `--r: 0deg`);
  }, timeout);
};

onMouseUp

This resets Pegman’s state once the user stops dragging:

Rotation resets to 0.
Pegman smoothly returns to its original position.

const onMouseUp = () => {
  isDragging = false;

  // Reset rotation
  pegman.setAttribute('style', `--r: 0`);

  // Animate Pegman back to its original position
  pegman.animate({ translate: `0px 0px` }, {
    duration: 500,
    fill: 'forwards',
    easing: 'ease',
  });

  // Clear residual state
  inactivityTimeout = setTimeout(() => {
    lastX = 0;
  }, timeout);
};

Final Thoughts

This snippet highlights how simple animations and interactivity can recreate an iconic user experience. Key takeaways:

Using CSS custom properties (like --r) keeps styling dynamic and manageable.
Rotation limits ensure a polished, natural feel for user interactions.
Timeouts and easing animations add realism to the motion.

Feel free to fork the CodePen, make changes and let me know what you think! 🚀🗺️

By the way...

I'm using the original sprites from google, which you can see here and make experiments:

Did you know? ✨ The Google Maps location I used is the real Santa Claus Village!
Fun fact: Santa’s Finnish name is Joulupukki, and he originally from Finland 🎅🏻🎄

Instagram-Style Like Animation 🥇

Rodrigo Antunes — Mon, 05 Aug 2024 20:05:27 +0000

This is a quick way I found to congratulate Brazil's top Olympic medalist, Rebeca Andrade, and, of course, share something I learned during the making of this effect.

Double click below to see the effect 🪄

HTML

The markup is pretty straightforward, so I don't think there is much to say, other than highlighting the semantic use of HTML elements for structure and clarity, and the use of <strong> tags so you don't have to handle it in the CSS.

CSS

I noticed there is a little random direction of the rotation every time the effect runs, so I passed a dynamic value to the CSS, similar to how we do with props in React.

.heart {
  animation-name: like;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes like {
  0% {
    opacity: 0;
    transform: scale(0)
  }

  40% {
    opacity: .8;
    transform: scale(1.2) rotate(var(--random-rotation-deg))
                   /* dynamic value here 👆 */
  }

  60% {
    opacity: 1;
    transform: scale(1)
  }

  100% {
    opacity: 0;
    transform: scale(.9) translateY(-500px)
  }
}

Javascript

Here's how I created the element, give it the .heart class (which contains the animation-name), and generated the random-rotation-deg value.

const image = document.querySelector('.image');

// listen for the 'dblclick' event
image.addEventListener('dblclick', () => {
  const rotation = Math.floor(Math.random() * 80) - 40;
  // this function returns a value between -40 and 40

  const heart = document.createElement('div');
  heart.classList.add('heart');
  heart.textContent = '🩷';
  heart.style.setProperty('--random-rotation-deg', `${rotation}deg`);
  // then, I pass this value so it can be read inside the CSS

  image.appendChild(heart);
  heart.onanimationend = () => heart.remove();
});

This method dynamically creates a heart element on double-click, applies a random rotation to it, and animates it using CSS keyframes.

For asset management, I'm using Cloudinary which offers 25 GB of storage in the free plan — more than enough for small projects.

Once again, Congratulations to Rebeca Andrade, Simone Biles and Jordan Chiles.

Out of the Blue: Creating Floating Hearts with a Range Slider with CSS and JavaScript

Rodrigo Antunes — Wed, 31 Jul 2024 20:00:23 +0000

Inspired by an animation I saw this morning, I decided to try creating something along those lines — though not nearly as impressive — using JavaScript 🎨.
It seemed like a fun and challenging task.

So, let's dive in!

HTML

We'll start with a simple structure:

<main>
  <input type="range" min="0" max="100" value="0" />
  <div class="container"></div>  <!-- this is where we'll place the hearts -->
</main>

CSS

The CSS plays a significant role in this project, and I'd like to highlight two key aspects:

Accent Color
CSS Animations

Accent Color

I couldn't remember how to change the default look of the <input type="range" /> element. During my research, I came across various vendor-prefixed pseudo-elements like ::-webkit-slider-runnable-track and ::-moz-range-track but the support for these wasn't great.

Then I came across a handy little CSS property called accent-color. I had seen it a couple of times before, but not often enough for it to stick in my memory. It's also a perfect fit for styling checkbox and radio input elements.

Good job, CSS Working Group! 🥳

input {
  /* ... */
  accent-color: white;
}

CSS Animations

I usually enjoy coding CSS animations from scratch, fine-tuning them to align with the design goals or specific creative direction. But today, I wasn't feeling it, so I asked ChatGPT to write three organic floating animations with some variations and randomness. It didn't nail it on the first try, so instead of tweaking the animations by hand, I modified the prompt. While it might have been faster to code manually,
after some time, the result was good enough.

edit: I fine-tuned the animations 😁

The one thing I was particularly picky about was the syntax. Initially, it generated something like this:

0% {
  transform: translateX(0px) translateY(0px) rotateX(45deg) rotateY(30deg) scale(0.25);
}

My reaction was like Michael Scott’s famous "Oh God, Please No!" meme. The CSS Transform Module Level 2 syntax looks so much cleaner:

0% {
  translate: 0px 0px;
  rotate: 45deg 30deg;
  scale: 0.25;
}

But I'm still getting used to this 'new' syntax too, so no big problems here.

Javascript

Okay, let's fire up the engine 🚛.

I found it challenging to explain my thought process, but I spent nearly an hour just thinking through the problem. Here’s a breakdown of my approach:

1. Listen to the input event.
2. Create a new element when the event fires.
3. Animate each element up from where the input is located.
4. Remove each element after it finishes animating.

However, there’s no straightforward way to determine where the "slider's thumb" is on the screen, just the input element itself. Turns out there was a simple solution to this:

range.addEventListener('input', (e) => {
  // ...
  const heart = document.createElement('div');
  heart.style.left = `${e.target.value}%`;
  // ...
}

Feel free to check out the code.

I could refine the code for readability, structure it better with functional programming, or even enhance the animations further, but it serves its purpose well for a quick experiment.

I hope you enjoy it, and happy coding!

A big thanks to Chris Gannon for his inspiring work.

Creating Smooth Tab Transitions with the View Transitions API

Rodrigo Antunes — Mon, 08 Apr 2024 15:41:32 +0000

TL;DR
The codepen is at the end of the post

Let's build this:

⚠️Important

Before diving into how to make this, it's important to note that the View Transitions API is not yet fully supported in all browsers. At the time of writing, Firefox and Safari do not fully support this API. For users on unsupported browsers, we will provide a fallback method to ensure a consistent experience across different platforms.

HTML

Let's start by setting up the HTML structure for our tabs. It is a simple navigation bar with buttons:

<nav>
  <button> Explore </button>
  <button> Discover </button>
  <button> Navigate </button>
  <button> Journey </button>
  <button> Quest </button>
</nav>

CSS (part 1/2)

Next, we'll add some CSS to style our navigation and create the tabbed interface. We'll use flexbox to organize the buttons horizontally and apply a custom underline effect.

The underline is actually a :after pseudo-element that gets applied to a element that have a .active class.

button {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  position: relative;
  font-size: 24px
}

/*  This is the underline element */
button.active:after {
  content: '';
  position: absolute;
  inset: 0 0 -8px 0;
  top: unset;
  height: 3px;
  background: #fff;
}

Javascript (part 1/2)

Now, let's add some JavaScript to handle button click events and update the active tab accordingly:

const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
  button.addEventListener('click', e => updateView(e))
});

const updateView = ({ target }) => {
  // Remove the .active class of all elements
  buttons.forEach(button => button.classList.remove('active'));
  // Add the .active class only to the clicked element
  target.classList.add('active');
}

If we run the project, we have this:

We are almost there 😅

CSS (part 2/2)

Here comes the wizardry 🧙
The view-transition-name property expects a string, any value that don't start with a number will do the job.

button.active:after {
  /* ... */
  view-animation-name: my-custom-transition; // unique name
}

Javascript (part 2/2)

Here comes the wizardry² 🧙
The startViewTransition() method expects a callback function to make some good stuff:

Handle the loading and positioning of the old and new content.
Animate the old and new states to create the transition.
Stop accidental user interactions with the old content from causing problems.
Remove the old content once the transition is complete.

const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
  button.addEventListener('click', (e) => {
    // Fallback, in case your browser
    // doesn't support startViewTransition
    if (!document.startViewTransition) {
      updateView(e);
      return
    }
    // tada 🪄
    document.startViewTransition(() => updateView(e))
  })
});

const updateView = ({ target }) => {
  buttons.forEach(item => item.classList.remove('active'));
  target.classList.add('active');
}

There you have it 🎉

With the View Transitions API, we can create seamless animations between different views or states of your web application, enhancing the overall user experience.

Codepen:

Glam Up My Markup - Cozy Camp

Rodrigo Antunes — Fri, 22 Mar 2024 12:05:36 +0000

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

This was a very fun challenge.
I explain the details of this journey after the demo.

Demo

Journey

I started by choosing the colors. I wanted to deliver a cozy and warm vibe, so I used CSS Variables to help me remember them.

:root {
  --color-camp-01: #738d5e; // muted green
  --color-camp-02: #293d31; // rich green
  --color-camp-03: #ffc78a; // warm golden
}

Looking at camp inspiration designs, I found strong typography, colorful contrasts and nature-inspired illustrations. Fonts are always hard to choose, so I made up my mind on Truculenta and kept moving forward.

Ok, time to build the thing.
Since we cannot edit the HTML, with flexbox I manage to achieve something like this.
Looks fine, but there is still some work to be done.

This is more of a mobile-first approach, since on desktop we have more room to work with, I thought about changing the direction of the flex elements. And using the :after pseudo element so I could place something inside the <h1> tag.
I used an SVG from game-icons library.

Putting it all together, we have this:

Good, we are getting somewhere.
Although, there is something missing 🤔

Getting back at the camp designs inspiration, I found some rough edges designs, and things that give some organic look. So I decide to try some border-image css to see how it looks.

Now, about the feedback when the form is sent?
Since I started this thinking about cozyness, we need some smooth animations:

At the last minute I decide to increased spacing between elements for improved readability 😊

Thank you Dev.to team for creating this challange.

Crafting interactive reactions similar to Google Meet using HTML, CSS, and Vanilla JavaScript

Rodrigo Antunes — Thu, 21 Mar 2024 14:56:39 +0000

TL;DR
Let's build this: https://codepen.io/rodrigoant/full/RwOpeKG

In today's landscape of competing frameworks, where an abundance of dependencies often takes center stage, it's easy to overlook the power and simplicity of pure JavaScript for creating interactive elements. Rather than getting caught up in the search for the "10 Best JavaScript Animation Libraries," let's explore how to implement interactive reactions similar to those in Google Meet using HTML, CSS, and vanilla JavaScript.

The Idea

The concept aims to replicate the reactions feature found in Google Meet, allowing users to express their feelings with a single click. The implementation involves presenting a list of emojis and animating them to appear inside a container when clicked.

HTML

Only a container and an unordered list of emoji is enough.
edit: Adding buttons is better for accessibility, thanks to @thomasbnt for the indirect suggestion ❤️

<div class="emoji-container"></div>

<div class="emoji-list">
  <ul>
    <li>
      <button aria-label="Heart emoji">
        💖
      </button>
    </li>
    <li>
      <button aria-label="Thumbs up emoji">
        👍
      </button>
    </li>
    <li>
      <button aria-label="Party popper emoji">
        🎉
      </button>
    </li>
    <!-- Other emojis -->
  </ul>
</div>

CSS

Regarding the CSS, there's nothing particularly revolutionary, but there's one notable aspect I'd like to mention: the use of will-change. It's important to note that according to the MDN Docs, will-change is typically recommended as a last resort for addressing performance issues. However, in pursuit of achieving the smoothest animation possible, I opted to include it.
Additionally, it's worth mentioning that the element is removed from the DOM after the animation completes, which should help ensure optimal performance.

.emoji-animate {
  /* ... */
  will-change: transform;
}

Javascript

By utilizing a constructor to organize tasks efficiently, along with the Web Animations API, smooth animations are achieved without the need of requestAnimationFrame or external dependencies. This approach enhances code organization and simplifies the animation process.

class EmojiAnimate {
  constructor() {
    this.emojis = document.querySelectorAll(".emoji-list button");
    this.container = document.querySelector('.emoji-container');
    this.handleEmojiClick = this.handleEmojiClick.bind(this);
    this.addEventListeners();
  }

  addEventListeners() {
    this.emojis.forEach(emoji => emoji.addEventListener('click', this.handleEmojiClick));
  }

  handleEmojiClick(e) {
    // Logic for handling emoji click and animation is below
  }
}

new EmojiAnimate();

Animating the Emojis

When an emoji is clicked, I dynamically create a new element to hold the emoji, position it inside the container, and animate its movement up towards the middle of the screen, while also adjusting its opacity.

  handleEmojiClick(e) {

    // create new element to hold emoji
    const emojiEl = document.createElement('div');
    emojiEl.classList.add('emoji-animate');

    // get emoji from clicked element
    const { innerHTML } = e.target;
    emojiEl.innerHTML = innerHTML;

    // place the element inside the container
    this.container.appendChild(emojiEl);

    // get dynamic positions
    const {height, left} = e.target.getBoundingClientRect();
    const {bottom, top, width} = this.container.getBoundingClientRect();

   // animation 🍃
    const animation = emojiEl.animate([
      { opacity: 1, transform: `translate(${left}px, ${bottom}px)`},
      { opacity: 0, transform: `translate(${width / 2}px, ${top - height}px)`},
    ], {
      duration: 2000, 
      easing: 'cubic-bezier(.47,.48,.44,.86)'
    });

    // remove element once has finished animating
    animation.onfinish = () => emojiEl.remove();
  }

That's it

By leveraging the fundamentals of HTML, CSS, and JavaScript, that's how to create interactive reactions without relying on external dependencies. This approach not only enhances the understanding of web development but also offers a lightweight and customizable solution for adding interactive elements to web applications. It serves as a proof of concept, reflecting the methodology likely employed in the development process before approving such functionality.

Feel free to experiment with the code provided and customize it further to suit your specific needs.

Happy coding!