Different techniques for using percentages in CSS transformations to create dynamic animations for DOM element translations

I have 14 objects positioned across the dom that I need to animate using the translate property. Currently, I am using transform: translate(x%, y%) for each object, requiring me to calculate the translation amount and apply a CSS style individually. This method becomes complex as the percentage translation is relative to the object's dimensions, meaning adjustments are needed if the object size changes.

.container {
  position: relative;
  width: 40%;
  padding-bottom: 40%;
  height: 0;
  background: #cdc;
}

.seats {
  position: absolute;
  width: 100%;
  height: 100%;
}

.seats .seat {
  position: absolute;
  width: 20%;
  height: 20%;
}

.seat.one {
  bottom: 0%;
  left: 50%;
}

.seat.two {
  bottom: 50%;
  left: 0%;
}

.seat.three {
  bottom: 50%;
  left: 80%;
}

.cards {
  position: absolute;
  height: 100%;
  width: 100%;
}

.cards .dealer {
  position: absolute;
  bottom: 90%;
  left: 50%;
}
<div class='container'>
  <div class="cards">
    <div class="dealer">
      Dealer
    </div>
  </div>
  <div class="seats">
  
  <div class="seat one">
    <div class="hand">
    Hand 1
    </div>
  </div>
  <div class="seat two">
    <div class="hand">
    Hand 2
    </div>
  </div>
  <div class="seat three">
    <div class="hand">
      Hand 3
    </div>
  </div>
  </div>
</div>

I am looking for a more efficient way to animate the translations of the elements without needing so many custom calculations and tweaks. Specifically, I want to smoothly move Hand 1/2/3 towards Dealer, with the animation reversible as well.

The current translation method does not work properly when resizing the container element. Is there an alternative approach that simplifies the process of translating DOM elements?

javascripthtmlcss

Answer №1

To easily control the display of elements, you can incorporate a CSS class and switch it on or off as required.

const toggle = document.getElementById('toggle');
const seats = document.querySelectorAll('.seat');

toggle.addEventListener('click', e => {
  seats.forEach(seat => {
    seat.classList.toggle('not-dealt');
  });
});
.container {
  position: relative;
  width: 40vmax;
  padding-bottom: 40vmax;
  height: 0;
  background: #cdc;
}

.seats {
  position: absolute;
  width: 100%;
  height: 100%;
}

.seat {
  position: absolute;
  background: #d99;
  transition: all 2s;
  white-space: nowrap;
}

.one {
  top: 100%;
  left: 50%;
  transform: translate(-50%, -100%);
}

.two {
  top: 50%;
  left: 0%;
  transform: translate(0, -50%);
}

.three {
  top: 50%;
  left: 100%;
  transform: translate(-100%, -50%);
}

.not-dealt {
  top: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

.cards {
  position: absolute;
  height: 100%;
  width: 100%;
}

.dealer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}
<div class="container">
  <div class="cards">
    <div class="dealer">
      Dealer
    </div>
  </div>

  <div class="seats">
    <div class="seat one">
      <div class="hand">
        Hand 1
      </div>
    </div>
    <div class="seat two">
      <div class="hand">
        Hand 2
      </div>
    </div>
    <div class="seat three">
      <div class="hand">
        Hand 3
      </div>
    </div>
  </div>
</div>

<button id="toggle">Toggle Cards</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Conceal the calendar icon from the date-type HTML input field specifically on the Firefox

The situation at hand is quite straightforward. <input type="date /> When viewed on Firefox (both desktop and mobile), it appears as follows: https://i.stack.imgur.com/S2i0s.png While the internet provides a solution specifically for Chrome: ...

htmlcss

"Resolving an inconsistency problem with the Vary header in Htaccess

Could someone help me identify the issues in my htaccess code? I'm encountering errors: This response is negotiated, but doesn't have an appropriate Vary header. The resource doesn't send Vary consistently. ## add vary header <IfModule ...

css.htaccessheadergzipvary

CSS3 rotation animation - begins to rotate and then halts at a specific angle

I attempted to develop a function that initiates a spin, replaces an image, and then stops the spin. However, when I remove the spin class, it jerks abruptly. How can I halt the spinning smoothly at a specific frame? setTimeout(function() { $('. ...

jqueryhtmlcsscss-animations

Floating hover box gracefully descends as you hover over it

While working on this particular site, I encountered an issue with the password being set as joint123. There was a map displayed with icons on the right side, and when hovering over the icons, the corresponding address would appear. However, the problem ar ...

htmlcsshover

Mastering sorting in AngularJS: ascending or descending, the choice is yours!

I have set up a table view with infinite scroll functionality. The table contains 2000 objects, but only shows 25 at a time. As the user scrolls to the bottom, it loads an additional 25 elements and so on. There is a "V" or "^" button in the header that sh ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat

The Angular Material date picker unpredictably updates when a date is manually changed and the tab key is pressed

My component involves the use of the Angular material date picker. However, I have encountered a strange issue with it. When I select a date using the calendar control, everything works fine. But if I manually change the date and then press the tab button, ...

javascripthtmlangulartypescriptangular-material

Is it possible to save the video title as a variable using YTDL-core?

Is there a way to store the video title as a global variable in JavaScript? ytdl.getBasicInfo(videoURL, function(err, info) { console.log(info.title) }); I have been trying various methods but I am unable to successfully define a variable to hold the v ...

javascriptnode.jsdiscord.js

Is it necessary to write Higher Order Component in React as a function?

As I dive into learning React, the concept of Higher Order Components (HOCs) becomes clearer. Take for instance the following example extracted from React's official documentation: function withSubscription(WrappedComponent, selectData) { // ...a ...

javascriptreactjshigher-order-components

Need assistance with jQuery AJAX?

Hey there, I'm a new member and I've gone through the different Ajax Help topics but still can't figure out why my code isn't working. Here's what I have: $(document).ready(function(){ $.ajax({ type: "GET", ur ...

javascriptjqueryajax

The cursor in a contenteditable element fails to return to its original position after adding a new line and then deleting it

I have come across a basic HTML code snippet: span { outline: none; } hello <span contenteditable="true"> world </span> Upon testing, I observed that each time I press ENTER within the contenteditable span, the cursor moves to a new ...

htmlcontenteditable

what can prevent a React component from re-rendering?

Being a novice in the realm of React, I find myself with a perplexing query. Within my application, I have two distinct components - the parent component named Goals and its child, EditGoal. The Goals component functions to display all goals, while the Edi ...

javascriptreactjs

Display exclusively the chosen option from the dropdown menu

I am facing an issue with the select input on my webpage. Whenever I try to print the page, it prints all the options of the select instead of just the one that is selected. Can someone please guide me on how to modify it so that only the selected option ...

javascripthtml

The function window.close() does not close the pop-up window when called within the pop-up

I am facing an issue with a Customer Info form that contains an anchor tag "close" meant to close the current window. This customer form is displayed as a pop-up. Within this form, there is also a search button that triggers a pop-up for the search form co ...

javascriptpopupwindow.closed

The CSS infinite animation becomes erratic and sluggish after a short period of time

My website featured a banner with a series of thumbnail images that animated at different intervals and looped indefinitely. Initially, the animations ran smoothly, but after a few seconds, they began to slow down and lose consistency. To troubleshoot, I u ...

htmlcssanimationanimate.css

"Why does the useEffect in Next.js fire each time I navigate to a new route

Currently, I have implemented a useEffect function within the Layout component. This function is responsible for fetching my userData and storing it in the redux-store. However, I have noticed that this function gets triggered every time there is a route c ...

javascriptnext.js

Transferring data between actions following an AJAX request in Zend Framework

I am currently utilizing an ajax call to communicate with a controller in order to update the number of articles displayed on the webpage. I have established an action within the controller to handle this ajax request. Below is a snippet of the code: publ ...

phpjavascriptajaxzend-framework

Sending data over a network using Socket and node.js

Trying to update a location on a Google Map using socket.io and node.js. I have 2 different methods for updating the map. There may be some basic issue as I am new to this. 1) Method using an API call that works: app.post('/location', function( ...

javascriptnode.jssockets

What is the best way to insert a hint into an asp:textbox?

Is there a method to insert a hint or placeholder text within an asp:TextBox element? I am looking for a way to have text appear in the textbox that disappears when the user clicks on it. Can this be done using html / css? ...

asp.netcsshtmlplaceholderhint

Exploring through a table using JavaScript

I am struggling to search a table within my HTML for a specific term. The code I have works to an extent, but it does not account for alternatives such as searching for "what is that" when I type in "What is that". Additionally, I need the script to ignor ...

javascripthtmlsearch

Adding query strings to the end of a URL in order to redirect to a new destination

After successfully capturing a query string at the start of my survey with PHP syntax, I now have it stored in a variable. My next challenge is to redirect to a different URL at the end of the survey, while also including that same query string. For insta ...

phpjqueryhtmlajax