Slick Carousel + Velocity.js

Question

Desidero combinare gli effetti Velocity.js al plug-in Carousel Slick.

Slick: http://kenwheeler.github.io/slick/ Velocity: http://julian.com/research/velocity/

Questo sta lavorando bene, ma c'è uno strano effetto collaterale:

<script> 
     $(function() { 
      $('.teaser').on('init', function(event, slick){ 
       createSequence(0); 
      });    
      $('.teaser').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 
       createSequence(nextSlide); 
      });    
      $('.teaser').slick({ 
       autoplay: true, 
       autoplaySpeed: 10000, 
       });    
      function createSequence(slideId) { 
       var $e = $('.slick-slide[data-slick-index='+slideId+']'); 
       $e.velocity("stop"); 
       var mySequence = [ 
        { e: $e.find('.teaserImg'), p: "transition.swoopIn", o: { duration: 500, sequenceQueue: false } },      
        { e: $e.find('.boxTitle'), p: "transition.bounceUpIn", o: { duration: 500, sequenceQueue: false } }, 
        { e: $e.find('.projectTitle'), p: "transition.bounceLeftIn", o: { duration: 1000, sequenceQueue: false } }, 
        { e: $e.find('.teaserTitle'), p: "transition.bounceRightIn", o: { duration: 1000, sequenceQueue: false } },       
        { e: $e.find('.teaserText'), p: "transition.fadeLeftBigIn", o: { duration: 500, sequenceQueue: false } }, 
        { e: $e.find('.teaserBtn'), p: "transition.fadeRightBigIn", o: { duration: 1000, sequenceQueue: false } } 
       ]; 
       $.Velocity.RunSequence(mySequence); 
      } 
     }); 
    </script> 

Questo è il codice ho ottenuto oggi. Così faccio una sequenza di effetti, che viene attivata con il hook beforeChange.

Quando vado alla diapositiva successiva, funziona. Ma quando vado veloce tra le diapositive e una sequenza continua a suonare, tutto va bek e vola sullo schermo.

Quindi voglio essere sicuro che la sequenza corrente si fermi prima di eseguire quella successiva. E questo è dove non so come farlo.

Qualche consiglio?

Answer 1

Cancellare la coda di animazione con $e.velocity("stop", true); e invertire l'animazione.

Quello che faccio è aggiungere una classe css (.animated) su ciascun elemento per cancellare e ripristinare le animazioni.

function createSequence(slideId) { 
       var $e = $('.slick-slide[data-slick-index='+slideId+']'); 

       $e.find('.animated').each(function (index, element) { 
        $(element).velocity('stop', true); 
        $(element).velocity('reverse', {duration: 1}); 
       }); 

       var mySequence = [ 
        { e: $e.find('.teaserImg'), p: "transition.swoopIn", o: { duration: 500, sequenceQueue: false } },      
        { e: $e.find('.boxTitle'), p: "transition.bounceUpIn", o: { duration: 500, sequenceQueue: false } }, 
        { e: $e.find('.projectTitle'), p: "transition.bounceLeftIn", o: { duration: 1000, sequenceQueue: false } }, 
        { e: $e.find('.teaserTitle'), p: "transition.bounceRightIn", o: { duration: 1000, sequenceQueue: false } },       
        { e: $e.find('.teaserText'), p: "transition.fadeLeftBigIn", o: { duration: 500, sequenceQueue: false } }, 
        { e: $e.find('.teaserBtn'), p: "transition.fadeRightBigIn", o: { duration: 1000, sequenceQueue: false } } 
       ]; 
       $.Velocity.RunSequence(mySequence); 
     } 

fonte: Velocity.js stop command