What is the best way to determine the maximum `width` in a `translateX` animation?

I'm looking to design something similar to a desktop-only carousel. Here's the code snippet I have:

<div class="wrapper">
<div class="image-container">
  <img alt="Siac" src="https://diey.now.sh/Icons/Clients/SIAC_LOGO.svg">
  <img alt="Change" src="https://diey.now.sh/Icons/Clients/CHANGE_LOGO.svg">
  <img alt="HF" src="https://diey.now.sh/Icons/Clients/H_F_Logo.svg">
  <img alt="VDM" src="https://diey.now.sh/Icons/Clients/VDM_Logo.svg">
  <img alt="Reviu" src="https://diey.now.sh/Icons/Clients/Reviu_Logo.svg">
  <img alt="Total Capital" src="https://diey.now.sh/Icons/Clients/Total_Capital_Logo.svg">
  <img alt="AdelantaT" src="https://diey.now.sh/Icons/Clients/AdelantaT_Logo.svg">
  <img alt="Ayssa" src="https://diey.now.sh/Icons/Clients/Ayssa_Logo.svg">
  <img alt="Carga Logística" src="https://diey.now.sh/Icons/Clients/Carga_Logistica_Logo.svg">
</div>
</div>


/* Adding padding based on screen width */
.wrapper {
  padding: 0 2.5em;

  @media (min-width: 1024px) {
    padding: 0 8em;
  }

  @media (min-width: 1280px) {
    padding: 0 12em;
  }
}

.image-container {
  @media (min-width: 768px) {
    display: flex;
    overflow-x: scroll;
    width: 100%;

    ::-webkit-scrollbar {
      width: 0px;
      background: transparent;
    }
  }
}

img {
  @media (min-width: 768px) {
    height: 100px;
    width: 240px;
    flex-shrink: 0;
    animation: moveSlideShow 9s ease-in-out alternate infinite;
    @keyframes moveSlideShow {
      100% {
        transform: translateX(-1440px);
      }
    }
  }

  @media (min-width: 1280px) {
    @keyframes moveSlideShow {
      100% {
        transform: translateX(-1200px);
      }
    }
  }
}

If you check the transform, it works well for specific screen sizes due to image widths. How can we calculate the correct translateX value dynamically?

This project is built using React.js and Styled-components. Any suggestions or solutions using tools like React-spring would be appreciated as I explore its capabilities :)

htmlcssreactjsanimationcss-animations

Answer №1

To achieve the desired result, utilize the calc function by including something like calc(100% - 20px). For further details, visit the MDN page. Keep in mind that when aiming for 100% of the screen width, the translate property corresponds to its own width of 100%. To address this issue, consider enveloping it within a parent element that spans 100% width and apply the transform: translate property to it.

Answer №2

Adjust the scroll to the top container and set the inner element to inline-flex (with a width equal to its content) so that you can easily implement translation using percentage values. To determine the width of the container, you can use the vw unit as it occupies the full width:

body {
  margin: 0;
}

.wrapper {
  margin: 0 2.5em;
  overflow: auto;
  --w: calc(100vw - 5em);
}

@media (min-width: 1024px) {
  .wrapper {
    margin: 0 8em;
    --w: calc(100vw - 16em);
  }
}

@media (min-width: 1280px) {
  .wrapper {
    margin: 0 12em;
    --w: calc(100vw - 24em);
  }
}

@media (min-width: 768px) {
  .image-container {
    display: inline-flex;
    animation: moveSlideShow 9s ease-in-out alternate infinite;
  }
  img {
    height: 100px;
    width: 240px;
  }
  @keyframes moveSlideShow {
    100% {
      transform: translateX(calc(-100% + var(--w)));
    }
  }
}
<div class="wrapper">
  <div class="image-container">
    <img alt="Siac" src="https://diey.now.sh/Icons/Clients/SIAC_LOGO.svg">
    <img alt="Change" src="https://diey.now.sh/Icons/Clients/CHANGE_LOGO.svg">
    <img alt="HF" src="https://diey.now.sh/Icons/Clients/H_F_Logo.svg">
    <img alt="VDM" src="https://diey.now.sh/Icons/Clients/VDM_Logo.svg">
    <img alt="Reviu" src="https://diey.now.sh/Icons/Clients/Reviu_Logo.svg">
    <img alt="Total Capital" src="https://diey.now.sh/Icons/Clients/Total_Capital_Logo.svg">
    <img alt="AdelantaT" src="https://diey.now.sh/Icons/Clients/AdelantaT_Logo.svg">
    <img alt="Ayssa" src="https://diey.now.sh/Icons/Clients/Ayssa_Logo.svg">
    <img alt="Carga Logística" src="https://diey.now.sh/Icons/Clients/Carga_Logistica_Logo.svg">
  </div>
</div>

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

Tips for ensuring your background image is fully displayed and covers the entire size

My dilemma lies within the header div. My intention is to have it fully covered with a background image without any cropping. However, the current setup seems to be stretching and cutting off parts of the image. Here is my CSS code: .header { bor ...

htmlcssbackground-imagecontaincover

Creating my website with a unique inverse color scheme

I'm looking to change the color scheme of my webpage so that it is inverse (white becomes black and black becomes white) similar to the Dark Reader chrome extension: https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbiee ...

javascripthtmlcss

Error when the class is not found + Application

I am attempting to create my debut Applet named MemoSaver2.java In addition, I have crafted the following html: <html> <object classid="java:MemoSaver2.class" type="application/x-java-applet" archive="MemoSaver2.jar" he ...

javahtmlappletnoclassdeffounderror

Tips for sending an object containing customized styles when calling the createTheme function

I am currently utilizing MaterialUI for styling components in my project. As I work on creating a project theme, I find it necessary to define an overrides object in order to establish the theme. Specifically, I have set up an overrides object where I over ...

reactjsmaterial-ui

Looking to modify the CSS of an element during a drop event using interact.js?

I've encountered an issue in my code where setAttribute and .transform are not working as expected. I have tried using them within the ondrop event function, but with no success. interact('.dropzone') .dropzone({ // Setting the r ...

javascriptcssinteract.js

Is it advisable to have an individual state handler for each button or toggle switch when using React Hooks?

Just starting out with React and experimenting. I have 3 toggle switches on one screen. Should I have a distinct state handler for each switch? Currently, I am using only one, but it's clear that this approach won't work as expected because isCh ...

reactjsreact-hooksuse-statereact-state-managementtoggleswitch

Using the .map function on JSON data with and without a parent element in JavaScript

In my current project, I am working on a React + Rails application. For handling JSON data, I typically use the default jbuilder in Rails. However, following the recommendations from the react-rails official documentation, I started adding a root node to m ...

javascriptruby-on-railsjsonreactjs

The MaterialUI theme maintains a consistent typography color throughout

I've been trying to update the Typography color through a theme, but without success. The text "Hello World 1" remains #3f51b5 in color, and "Hello World 2" is still rgba(0, 0, 0, 0.87). I'm open to any solutions that do not involve styling or C ...

reactjsmaterial-ui

Is it possible to replace text on click using CSS instead of jQuery?

My new project involves creating a flashcard system. The idea is that when a question is clicked, it reveals the answer and hides the question. To achieve this, I am currently using the following code: jsFiddle <p id="shown">What is stackoverflow?&l ...

jqueryhtmlcssclickshow-hide

Trying to configure and use two joysticks at the same time using touch events

I have been grappling with this problem for the past two days. My current project involves using an HTML5/JS game engine called ImpactJS, and I came across a helpful plugin designed to create joystick touch zones for mobile devices. The basic concept is th ...

javascripthtmlmulti-touchimpactjs

Adjusting the height of a flexbox column to fit three rows within the space of two

Exploring the wonders of Flexbox and delving into its functionality. I have shared a Code Sandbox link showcasing my React /bootstrap code in progress... Currently, I am developing a clock component with two buttons for adjusting time (increase/decrease). ...

javascriptcssreactjstwitter-bootstrapflexbox

Manipulate your table data with jQuery: add, update, delete, and display information with ease

When adding data dynamically to the table and attempting to edit, the checkbox value is not updating. This issue needs to be resolved. You can view the code in action on jsFiddle here on JSFiddle ...

javascriptjqueryhtml

Is there a way to modify the state of my spans by utilizing onMouseHover functionality?

I am currently updating the state of my span by using document.getElementById('heart').innerHTML = 'favorite'; Do you have a more efficient method for achieving this? If so, please share your solution with me. Below is my code snippet. ...

javascriptreactjsfunctionarrow-functions

Move the cursor over the text to reveal an image

Hello, I'm trying to replicate the same animation effect as seen on these websites: and . Specifically, when hovering over the "selected works" section, an image is displayed. I suspect it's using a JavaScript library, but I can't seem to i ...

javascripthtmlcssanimation

Leverage Springs with TypeScript

function createDefaultOrder(items: any[]): number[] { return items.map((_, index) => index); } type CustomHandler<T> = (index: number) => T; type CustomValues = { zIndex: number, y: number, scale: number, shadow: number, immediate: ...

reactjstypescriptreact-hooksreact-spring

Black textures with images sourced from the same domain - Cross-origin

Despite trying numerous solutions and tips to resolve the cross-origin issue, I still can't seem to fix it. There are no errors, the images are hosted on the same domain as the webgl test, but the textures appear black. Occasionally when I refresh rep ...

javascripthtmlthree.js

The function this.props.logged in is undefined and is not functioning

While on one of the tabs in the Tabbar, I added a function to navigate to the login screen when the Logout button is pressed: logout() { AuthenticationService.logout(); const resetAction = NavigationActions.reset({ index: 0, ...

androidiosreactjsreact-nativeexpo

Exploring the functionality of "Use client" within a one-page application developed using Next.js

I am currently working on a single-page application located at src/app/page.js. I find myself grappling with the concepts of SSR and CSR. My query is related to how using use client, useEffect, and useState along with Framer Motion in this page could pot ...

reactjsnext.jsserver-side-renderingcsr

The include_once function is functioning correctly on one page, but encountering issues on another page. No errors are being displayed

I am currently using Bootstrap for my website. When I include the bottom and footer sections in actualites.php (at the end of the file), everything works smoothly. As I construct my website, I am trying to incorporate content via URL. My code looks like t ...

phphtmlinclude-once

Does the server transmit HTML page content rather than the information you need?

My React application is connected to a backend built with Node.js. However, when I try to fetch data in my React component, the server sends back an HTML page instead of the expected data, displaying raw HTML on the screen. Backend (server.js): app.route ...

javascriptnode.jsreactjs