Move an image from left to right, then again from left to right

Question

I am working on a css for some images, basically what i want to achieve is that there is a image it should come out of the left side move towards the right side, when it reaches the right end it should again come out of the left side and so on, i was able to achieve this using the following code.

@keyframes slideAnimation {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

.row-1 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}

.image-container {
  position: absolute;
  top: 4%;
  width: 100vw !important;
  overflow: hidden;
  animation: slideAnimation 18s linear infinite;
}

<div class="row-1">
  <div class="image-container">
    <img class="img" src="/src/assets/image.svg" alt="img">
  </div>
</div>

This works for desktop and not for mobile css it adds scroll to my page even though the image comes out of left again when it reaches the right side but the image container's width is 100vw, and image is in the start of the container and when image reaches the extreme right side there is a scroll that because of the container width, which is effecting my other absolute elements on the page, can i somehow disable that scroll, or achieve the same thing using some different way because its effecting my other absolute elements as well.

you can try setting left : 0; on image container, that should keep the image container to the extreme left. — Sunny, Jun 12 '23 at 12:54

score 1 · Answer 1 · answered Jun 12 '23 at 13:32

1

The issue you're facing is due to the fact that the animated element is moving outside the viewport, causing the page to scroll. One way to prevent this is to hide the overflow on the parent container. However, since you mentioned that this is affecting other absolute elements on your page, another approach might be to use CSS transform property instead of changing the left or right properties.

@keyframes slideAnimation {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.row-1 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.image-container {
  position: absolute;
  top: 4%;
  width: 100%;
  animation: slideAnimation 18s linear infinite;
}

The slideAnimation keyframes are using translateX to move the image from left to right. The image starts off the screen (-100%) and moves to the right side of the screen (100%). The overflow: hidden on the .row-1 class will prevent any horizontal scrolling caused by the animation.

This should give you the desired effect without causing any unwanted scrolling

answered Jun 12 '23 at 13:32

Erencan

185
6

Hey , this works , but the image is not visible for some reason, i checked its working using inspect element – Moin Nawaz Jun 12 '23 at 13:39
Ensure that the images have width and height. Maybe these are missing – Erencan Jun 12 '23 at 13:43
the image is shown if i remove position absolute from image-container, but because i am using these animations in background i want them to be absolute so i can place them as i see fit – Moin Nawaz Jun 12 '23 at 13:45
Okay got it. Remove overflow: hidden; from .row-1 { position: relative; width: 100%; height: 100%; } now it should work as expected. – Erencan Jun 12 '23 at 13:49
This works now. Thanks a lot, you are a saviour. – Moin Nawaz Jun 12 '23 at 13:51
You're welcome! I wish you the best of luck – Erencan Jun 12 '23 at 13:52
Hey sorry i checked now, it dosent work for the mobile devices, it still adds scroll – Moin Nawaz Jun 12 '23 at 21:34

score 0 · Answer 2 · answered Jun 12 '23 at 12:57

0

Getting elements to move at all has been answered here: CSS transition effect makes image blurry / moves image 1px, in Chrome?

As for resetting back to the left hand side, have you considered a script that checks if the image's location exceeds the pixel width of the window, and if so, resets it back to the left hand side?

answered Jun 12 '23 at 12:57

addyHyena

56
6

1

Please read my query, the link you gave reference for is not related to my query, my animation is working, what i have asked is that as my image is moving towards right the scroll is added for mobile devices and it gets bigger. and this scroll is effecting my other absolute elements. – Moin Nawaz Jun 12 '23 at 13:08

Move an image from left to right, then again from left to right

2 Answers2