This script I am using creates a rotating text effect for a title on a site I am building. I am wanting to increase the speed in which they rotate gradually, so it starts off slow, gradually speeds up, holds the top speed of say 7x original and then slowly goes back to the starting pace and does this in a loop..
The time in which it takes to rotate is currently set at the end of the function in the '1200' area, so I assume it would need to come from a variable and have that behaviour stored in it within the function? Just lost on where to go next.
setInterval(() => {
const up = document.querySelector('.span-one[data-up]');
const show = document.querySelector('.span-one[data-show]');
const down = show.nextElementSibling || document.querySelector('.span-one:first-
child');
up.removeAttribute('data-up');
show.removeAttribute('data-show');
show.setAttribute('data-up', '');
down.setAttribute('data-show', '');
}, 1200);
Here is a code that can help you Though keep in mind, the styles are applied on a bare element. In your code you have to take into account the context as well.
/* Here you defined the animation. You can play around more and adjust the speed as you want */
@keyframes example {
/* Here are some options */
/* uncomment the sections to experiment */
/* 0% { transform: rotate(0deg); }
25% { transform: rotate(90deg); }
50% { transform: rotate(120deg); }
75% { transform: rotate(180deg); }
100% { transform: rotate(360deg); } */
/* 0% { transform: rotate(0deg); }
25% { transform: rotate(80deg); }
50% { transform: rotate(180deg); }
75% { transform: rotate(290deg); }
100% { transform: rotate(360deg); } */
0% { transform: rotate(0deg); }
50% { transform: rotate(100deg); }
75% { transform: rotate(300deg); }
100% { transform: rotate(360deg); }
/* You can google about the animations and how these percentages work, but actually its pretty simple */
}
.rotating {
/* This is optional, but needed if your title is block level element, just play around and see the differnce */
display: inline-block;
/* this is mandatory */
animation-name: example;
animation-duration: 5s;
animation-iteration-count: infinite;
}<html>
<body>
<h1 class="rotating">My Dear Rotating Title</h1>
</body>
</html>Stackoverflow is too strict on pasting the link to jsfiddle, so I embedded it here