javascriptjqueryanimationroyal-sliderjquery-textillate

Using Textillate with Royalslider

I am trying to integrate the Textillate script with Royalslider, but having issues getting Textillate to fire upon slide change, rather than on every slide upon first load.

The 'Current' code below, which is attempting to initialise the textillate.js script, each time the slide is changed. However, the effect is being applied to every rsABlock (text to be animated) regardless of which slide they are placed on. I want the textillate script to fire on the rsABlock on each individual slide (there is one on every slide), as you move through and change slides. Please see the 'Attempt' based on some very basic support from the Royalslider support portal, but this is not working.

Can anyone help?

Current

this.rsInstance().ev.on('rsAfterSlideChange', function() {
    // Textillate animation
    $('.rsABlock').textillate({
        loop: false,
        type: 'word'
    });
});

Attempt

this.rsInstance().ev.on('rsAfterSlideChange', function() {
    this.rsInstance().currSlide.content.find('.rsABlock').textillate({
        loop: false,
        type: 'word'
        // More options here
    });
});
Solution

  • Solved the issue, appears that I was using this.rsInstance() one too many times.

    this.rsInstance().ev.on('rsAfterSlideChange', function() {
    this.currSlide.content.find('.rsABlock').textillate({
        loop: false,
        initialDelay: 0,
    });
});