title: Velocity.js/Blast.js starting opacity at 0
body: <p>I am using Velocity.js and Blast.js to create a simple load in each word as an animation... one of the basic setups. I am also using this alongside Cycle2.</p>
  
  <p>I have a few issues with what I am trying to achieve that I cannot work out from the documentation. A 'Velocity/Blast function' can exist on many slides throughout in a cycle2 slider so it needs to re-run each time.</p>
  
  <p>This is what I am trying to achieve:</p>
  
  <ol>
  <li>The Velocity animation needs to begin at opacity:0 each time... so when you cycle to a slide it runs from 0 to 1 rather than showing it, then hiding it, then running the animation.</li>
  <li>As you cycle the slider next/prev it should rerun and start from 0 as before.</li>
  <li>Remove in transition/fade on each word and simply have it as a show/hide.</li>
  </ol>
  
  <p>I hope this makes sense. I have created a bare bones JSFiddle to show you a basic set up and what I have so far. Hope you can help.</p>
  
  <p><a href="http://jsfiddle.net/h3vo8LL1/1/" rel="nofollow">http://jsfiddle.net/h3vo8LL1/1/</a></p>
  
  <pre><code>//
  function featuredProjectTextAnimation() {
      $('.home-section-container .each-section .each-slide.text .text-container.animated')
      .blast({ 
          delimiter: 'word' 
      })
      .velocity('transition.fadeIn', {
          display: null,
          duration: 0,
          stagger: 100,
          delay: 400,
          begin: function() { 
              //
          },
          complete: function() { 
              //
          }
      });
  }
  
  //
  if ($('.home-slider-container').length &gt; 0) {
      $('.home-slider-container .home-slider').each(function() {
          var $this = $(this);
          var slideCount = $this.find('.each-slide').length;
          if (slideCount &lt;= 1) {
              $this.next('.home-slider-pager').remove();
              $this.prev('.home-slider-navigation').remove();
          }
          $this.cycle({
              fx: 'fade',
              slides: '&gt; .each-slide',
              caption: $this.next('.home-slider-pager'),
              captionTemplate: '{{slideNum}}/{{slideCount}}',
              sync: true,
              timeout: 0,
              random: false,
              pagerActiveClass: 'active',
              next: $this.prev('.home-slider-navigation').find('.next'),
              prev: $this.prev('.home-slider-navigation').find('.prev'),
              loader: true,
              autoHeight: 'container',
              swipe: true
          });
          $this.on('cycle-before', function() {
  
          });
          $this.on('cycle-after', function() {
              featuredProjectTextAnimation();
          });
      });
  }
  </code></pre>