Help with having the text display upon the js delay function

[ChrisjChrisj]

Upon page load the text displays and js excutes successfully:

function runAnimDelay() {     

  !function($){$.fn.scramble=function(t,e,n,i){("number"!=typeof t||NaN===t||t<1e3||t>2e4)&&(t=3e3),("number"!=typeof e||NaN===e||e<5||e>1e3)&&(e=20);var r={numbers:["1","0"],alphabet:["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],punctuation:["@","#","$","%","^","*","(",")","&","+","=","}","{","|",":",";",">","<","?","~"," "],get alphanumeric(){return this.numbers.concat(this.alphabet)},get all(){return this.alphanumeric.concat(this.punctuation)}};void 0!==n&&n in r||(n="all"),n=r[n],i=void 0!==i&&i!==!1;var a=this.text();this.text("");var s=function(t){var e=t.length,n=Math.floor(Math.random()*e),r=t[n];return i?r.toUpperCase():r},o=function(t,e,n){var i=e.slice(0,n);return i=i.join(""),t.splice(0,i.length,i)},h=function(t){for(var e=[],i=0;i<t;i++)e.push(s(n));return e},c=function(n,i){this.iteration=0,this.spliceIteration=0,this.$element=n,this.word=i,this.len=i.length,this.arr=i.split("");var r=parseInt(t/e/this.len);this.scramble=function(t){this.iteration+=1;var e=h(this.len);this.iteration%r===0&&(this.spliceIteration+=1),o(e,this.arr,this.spliceIteration);var n=e.join("");this.$element.text(n),this.spliceIteration===this.len&&window.clearInterval(t)}},l=new c(this,a),u=window.setInterval(function(){l.scramble(u)},e);return this}}(jQuery);

  function runAnimation() {

    jQuery('#headline1').addClass('pre-animation');
    jQuery('#headline1').scramble(3000, 50, "punctuation", true);

    jQuery('#headline1').append('<span class="after">.</span>');
    jQuery('#headline1').removeClass( 'pre-animation' ).addClass('post-animation');
  }

  function runNext() {
    jQuery('#headline1').append( "<span>.</span>" );
  }

  runAnimation();
}

setTimeout(function () {
  runAnimDelay();
}, 8000);

But what I’d like is to have the text display upon the delay start.

I tried to add this without success:

  setTimeout(function(){
      $('#headline1').fadeIn('slow');
   },8000);

The css is this:

.span before {

  .pre-animation & {
    opacity: 0;
  }
}

.after {
  opacity: 0;
  transition: all 1s ease;

  .post-animation & {
    opacity: 1;
  }
}

#headline1 {
 font-family: arial;
  font-weight: 700;
  font-size: 5vw;
  color: #000000;
   margin-left: 15vw;
   border:1px solid orange;
   width: 70vw;
  &.animating {
    color: $animating;
  }
}

any guidance is welcomed…

[PaulOB]

@ChrisjChrisj

I tried to add this without success:

You can’t fade something in if its not already faded out? I guess you’d need to do this first.

$("#headline1").fadeOut(0);
setTimeout(function () {
  $("#headline1").fadeIn("slow");
}, 7000);

I don’t really think you will see the fadein effect though as you are scrambling the letters from the start so all you have at 8 seconds is the one letter which is when you set your fadein to begin.

I’m assuming you have something roughly like this: