Prevent all phrases from flashing inside rotating element on page load

[mehtaculous]

Is there anyway to prevent all the phrases from flashing when the page is reloaded? Everything inside the element will appear at once for a quick second before the animation triggers.

index.html

<h4><span id="js-rotating">Software Engineer | Developer | Programmer</span></h4><br>

main.js

 $("#js-rotating").Morphext({
    animation: "flipInX",
    separator: "|",
    speed: 3000
 });

[MrSaints]

You can set the display: none for #js-rotating, and set it to display: inline-block for .morphext since that is only applied once the script is started.

[mehtaculous]

How exactly do I add the display: inline-block to .morphtext inside the .js file?

[MrSaints]

It'd be better to do it using CSS. e.g. https://github.com/MrSaints/Morphext/blob/master/dist/morphext.css

[mehtaculous]

cool thanks!