Editing a animation speed of a css object

Question

i have a spinning logo, and i want to make a button that changes the speed. I want it to be able to be decreased infinitely smaller, or bigger. What i don't understand is how to edit the speed. This would be greatly appreciated. Im just writing text till it let me post now

main.js

import React from 'react';
import logo from './image.png';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo-circle" alt="White cross, with a blue bacground spining" id='spinnerLogo'/>
        <p>Hello, and welcome to the begining of the Swiss Plus Website. <strong>We hope you enjoy your stay</strong></p>
        <button className='App-button' id='fastLogoButton'>Increase Spin Speed!</button>
        <button className='App-button' id='slowLogoButton'>Decrease Spin Speed!</button>
      </header>
    </div>
  );
}
var logo = document.getElementById("spinnerLogo"),
    fasterLogo = document.getElementById('fastLogoButton');
    slowerLogo = document.getElementById('slowLogoButton')
function faster () {
  var button = this;
  logo.style.animation = App-logo-spin infinite 5s linear;
}

fasterLogo.onclick = faster
export default App;

main.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo-circle {
    border-radius: 50%;
    animation: App-logo-spin infinite 5s linear;
  }
}
.App-button {
  padding: .5em 2em;
  border-radius: 6px;
  background-color: skyblue;
  border: none;
}
.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

The duplicate question has the same answer (well, the important part) as the answer you accepted. The value that is changed in both cases is the `duration` of the animation. — Tigger, Mar 14 '20 at 00:40

score 1 · Accepted Answer · answered Mar 14 '20 at 00:24

First things first, if you are using React, you should familiarise yourself with the React way of doing things. Things like getElementById and onclick are not going to work anymore because you are not interacting with the DOM directly, but with the virtual DOM which updates the DOM selectively based each individual change.

Instead, you want to use state to update elements when variables change. All functions and state should also be declared within the scope of your component.

import React, {useState} from 'react';
import './App.css';

function App() {

  const [speed, setSpeed] = useState(5);

  function faster () {
    setSpeed(speed === 1 ? speed : speed-1);
  };

  function slower() {
    setSpeed(speed+1);
  }

  const animationStyle = {
    animation: `App-logo-spin infinite ${speed}s linear`
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} style={animationStyle} className="App-logo-circle" alt="White cross, with a blue bacground spining" id='spinnerLogo'/>
        <p>Hello, and welcome to the begining of the Swiss Plus Website. <strong>We hope you enjoy your stay</strong></p>
        <button className='App-button' id='fastLogoButton' onClick={faster}>Increase Spin Speed!</button>
        <button className='App-button' id='slowLogoButton' onClick={slower}>Decrease Spin Speed!</button>
      </header>
    </div>
  );
}

export default App;

your answer it's great, but I set the useState to 5.0 instead to start decrease and increment the number by 0.1 instead of 1, that's because when reaches from 1 to 0 the animation will disappear because in 0 time will rotate 360 degree — Juorder Gonzalez, Mar 14 '20 at 00:34
Yes, I did add the turnary check in `faster` which stops the speed going any higher than `1s` to avoid that problem. You will probably want to include the same check for `0.1`, but otherwise you are free to use whatever step you want for animation speed. — lawrence-witt, Mar 14 '20 at 00:37

Editing a animation speed of a css object

1 Answers1