Problem in using translate CSS transposed in JS

Question

I made a div that translates infinitely horizontally like the marquee tag and when the mouse is over, the animation is paused ... I would like to make sure that when the mouse wheel activates its event the div translates some pixels. But in my attempt, the div stays stuck at the point where the animation was paused. Below I leave the code:

var widgets = document.querySelector(`.widgets`);

widgets.addEventListener(`wheel`, (e) => {
  widgets.style.transform = "translateX(200px) !important"
});

.main .widgets {
  display: flex;
  animation: marquee 20s linear infinite;
}

.main .widgets:hover {
  animation-play-state: paused;
}

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

<div class="main">
  <div class="widgets">
    <div class="wid">classeviva</div>
    <div class="wid">moodle</div>
    <div class="wid">circolari</div>
    <div class="wid">gmail</div>
    <div class="wid">ECDL</div>
    <div class="wid">cambdridge assessment english</div>
    <div class="wid">PON</div>
    <div class="wid">erasmus+</div>
    <div class="wid">amministrazione trasparente</div>
    <div class="wid">albo online</div>
  </div>
</div>

Welcome to Stack Overflow! Please update the question to include your HTML as well. You can also put your code in a stack snippet using the `<>` tool. — disinfor, Sep 13 '22 at 13:18
Thanks a lot but I would prefer you to help me with the problem I have @disinfor — Francesco Pauselli, Sep 13 '22 at 13:26
I accommodated you, even though I don't think it will help solve my problem enough @disinfor — Francesco Pauselli, Sep 13 '22 at 13:32
Adding your HTML helps us help you. Without it, we'd only guess what it is and we need it to test your Javascript. That's why I asked for it. — disinfor, Sep 13 '22 at 13:52
Does this answer your question? [Passing parameters to css animation](https://stackoverflow.com/questions/49750473/passing-parameters-to-css-animation) — disinfor, Sep 13 '22 at 14:09

score 0 · Accepted Answer · answered Sep 13 '22 at 14:13

Since you are using @keyframes you need to target those CSS properties.

Using this answer: Passing parameters to css animation, I set up a CSS variable to use for the initial translateX value. Using JS, we can then change that value using [setProperty][1] on the wheel event.

var widgets = document.querySelector(`.widgets`);

widgets.addEventListener(`wheel`, (e) => {
  e.preventDefault;
  widgets.style.setProperty('--translate-x', '200px');
}, {
  passive: false
});

:root {
  --translate-x: 100%;
}

.main .widgets {
  display: flex;
  animation: marquee 20s linear infinite;
}

.main .widgets:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% {
    transform: translateX(var(--translate-x));
  }
  100% {
    transform: translateX(-100%);
  }
}

<div class="main">
  <div class="widgets">
    <div class="wid">classeviva</div>
    <div class="wid">moodle</div>
    <div class="wid">circolari</div>
    <div class="wid">gmail</div>
    <div class="wid">ECDL</div>
    <div class="wid">cambdridge assessment english</div>
    <div class="wid">PON</div>
    <div class="wid">erasmus+</div>
    <div class="wid">amministrazione trasparente</div>
    <div class="wid">albo online</div>
  </div>
</div>

Problem in using translate CSS transposed in JS

1 Answers1