Animated Elements loading slowly. Wrong transition timings etc.

Site URL: https://www.2pt5.co.uk

Hi,

Having problems getting an animated element (rotating text) to load properly, particularly on mobile devices.

If you check my site homepage (2pt5.co.uk) you'll see the background colour changes every 2 seconds, and so does a line of text. The two elements should be synced up to the same timing, but on mobile devices (and sometimes desktop depending on the browser) the text seems to go a bit wrong and the timings are off. 

Anyone have any idea how to fix this or improve it at least? Thank you in advance for anyone who can take the time to help me out here.

I'll place the code I'm using below. I'm not a coder so it's all a bit hacky. (Note, this is being put into the custom css window in the design section. There is also an html code block element containing the text itself.)

.rw-wrapper{
    width: 100%;
    position: center;
  margin: auto;
    font-family: 'Helvetica neue';
  overflow: hidden;
}

.rw-words{
    width: 100%;
  display: flex!important;
  justify-content: center!important;
  margin: auto;
  overflow: hidden;
}
.rw-words span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
  margin: auto;
    width: 100%;
    color: #ffffff;
  padding: 0px 0px!important;
}

.rw-words-1 span{
    animation: rotateWordsFirst 12s infinite 0s;
  padding-left: 0px!important;
}

@keyframes rotateWordsFirst {
     0% { opacity: 1; height: 70px; }
 16.6% { opacity: 1; height: 70px; }
  16.7% { opacity: 0; height: 70px; }
  100% { opacity: 0; height: 70px; }
}

.rw-words-2 span{
    animation: rotateWordsSecond 12s infinite 0s;
  animation-delay: 2s;
  padding-left: 0px!important;
}

@keyframes rotateWordsSecond {
      0% { opacity: 1; height: 70px; }
 16.6% { opacity: 1; height: 70px; }
  16.7% { opacity: 0; height: 70px; }
  100% { opacity: 0; height: 70px; }
}

.rw-words-3 span{
    animation: rotateWordsThird 12s infinite 0s;
  animation-delay: 4s;
  padding-left: 0px!important;
}

@keyframes rotateWordsThird {
      0% { opacity: 1; height: 70px; }
 16.6% { opacity: 1; height: 70px; }
  16.7% { opacity: 0; height: 70px; }
  100% { opacity: 0; height: 70px; }
}

.rw-words-4 span{
    animation: rotateWordsFourth 12s infinite 0s;
  animation-delay: 6s;
  padding-left: 0px!important;
}

@keyframes rotateWordsFourth {
      0% { opacity: 1; height: 70px; }
 16.6% { opacity: 1; height: 70px; }
  16.7% { opacity: 0; height: 70px; }
  100% { opacity: 0; height: 70px; }
}

.rw-words-5 span{
    animation: rotateWordsFifth 12s infinite 0s;
  animation-delay: 8s;
  padding-left: 0px!important;
}

@keyframes rotateWordsFifth {
      0% { opacity: 1; height: 70px; }
 16.6% { opacity: 1; height: 70px; }
  16.7% { opacity: 0; height: 70px; }
  100% { opacity: 0; height: 70px; }
}

.rw-words-6 span{
    animation: rotateWordsSixth 12s infinite 0s;
  animation-delay: 10s;
  padding-left: 0px!important;
}

@keyframes rotateWordsSixth {
   0% { opacity: 1; height: 70px; }
 16.6% { opacity: 1; height: 70px; }
  16.7% { opacity: 0; height: 70px; }
  100% { opacity: 0; height: 70px; }
}

Hi. Do you still need help on this?

On 11/21/2020 at 2:51 PM, tuanphan said:

Hi. Do you still need help on this?

Hey, yes still struggling with this. It just seems to be on some mobiles (older iPhones for example) where the text rotation is loading slowly or not timing up correctly. Any ideas? Thanks!