Velocity.js/Blast.js starting opacity at 0

Question

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.

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.

This is what I am trying to achieve:

1. 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.
2. As you cycle the slider next/prev it should rerun and start from 0 as before.
3. Remove in transition/fade on each word and simply have it as a show/hide.

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.

http://jsfiddle.net/h3vo8LL1/1/

//
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 > 0) {
    $('.home-slider-container .home-slider').each(function() {
        var $this = $(this);
        var slideCount = $this.find('.each-slide').length;
        if (slideCount <= 1) {
            $this.next('.home-slider-pager').remove();
            $this.prev('.home-slider-navigation').remove();
        }
        $this.cycle({
            fx: 'fade',
            slides: '> .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();
        });
    });
}

Answer 1

Here you go: http://jsfiddle.net/h3vo8LL1/2/ . You had 2 issues there:

1. You need to pass the incoming slide element to featuredProjectTextAnimation() and find the .animated element in it, instead of selecting all of your text slides.
2. You need to have each slide initially hidden, here, just for example, I set opacity to 0 on the outgoing slide element, and on begin I set it to 1. You can also use display: none or whatever suits you.

HTH!