Search code examples
jquerywordpresscachingcss-animations

Text Rotator Shows Whole List for a Split Second, then starts working

I have a text rotator for a hero, and its functioning properly, but when I clear my cache and load the page, all the words that are supposed to rotate, show for a tiny second and then the rotator starts working. Im not sure how to prevent that. I created a fiddle, and the fiddle does not show the entire list, but the dev site I am working on does. Im thinking it might a caching plugin...that is loading deferred, but Im not sure how to configure this to work seamlessly.

 $(".rotate").rotator();

https://jsfiddle.net/EdgarAlexPoe/mhjrdy0n/4/

Solution

  • I'm not familiar with the particular library, but what you need could be as simple as adding

    .rotate-arena li {
  display: none;
}

    to the CSS. Seemed to work OK when I added it to your JSFIDDLE.

    As for why it shows on the dev site and not the snippet, could be because the dev site has to load x, y, and z elements and scripts before it gets to the JS, while the snippet gets right to the point.