Html Question posted in
Some basic documentation can be found here.

Html – How to make translate animation slower by half on mouseover

I tried various avenues to replicate the animation on this page

https://www.apple.com/services/

As you see, there are looping carousels consisting of thumbnails that move to the left (translateX). When you hover on them, their speed is slowed down by about half. This looks simple, but it turns out to be one of the most complex tasks I tried to achieve. I’ve tried.

.carousel {
animation-name: move-to-right 
animation-duration: 5s;
}

.carousel:hover {
animation-duration: 10s;
}

it slows down the animation, but on mouse out, the carousels jump to the left. Pausing the animation on hover is very simple, but slowing it down, can’t find the correct way to do that.

Tags:

2

Answers


  1. 0

    By using the Web Animation API you can control the playBackRate of any animation (CSS animation or transition or Web Animation):

    document.querySelector(".carousel").onmouseenter = (evt) => {
  const anim = evt.currentTarget.getAnimations()
    .find(({ animationName }) => animationName === "move-to-right");
  if (!anim) { return; }
  anim.playbackRate = 0.5;
};

document.querySelector(".carousel").onmouseleave = (evt) => {
  const anim = evt.currentTarget.getAnimations()
    .find(({ animationName }) => animationName === "move-to-right");
  if (!anim) { return; }
  anim.playbackRate = 1;
};
    .carousel {
  width: 600vw;
  height: 100%;
  background: linear-gradient(to right in hsl longer hue, red, blue, red);
  background-size: 500vw 100%;
  animation: move-to-right 2.5s infinite linear;
}
.container {
  height: 300px;
  width: 100vw;
  overflow: clip;
}
  
@keyframes move-to-right {
  to {
    translate: -500vw 0;
  }
}
    Mouse over to slow down.<br>
<div class="container">
  <div class="carousel"></div>
<div>
    Login or Signup to reply.
  2. 0

    To achieve smooth animation like apples , you can use css for movement and javascript for adjusting speed. If you only change animation-duration it causes jumping effect. With javascript you can dynamically slow down the carousel maintaining its current position.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search