Slick Carousel + Velocity.js

Question

I want to combine Velocity.js effects to the Slick Carousel plugin.

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

This is working fine, but there is a strange side effect:

<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>

This is the code I got now. So I make an Effect sequence, which is triggered with the hook beforeChange.

When I go to the next slide, it works. But when I go fast between the slides and one sequence is still playing, everything goes bezerk and flying to the screen.

So I want to make sure the current sequence stops before executing the next one. And this is where I don't know how to do it.

Any tips?

Dentelle

Answer 1

Clear the animation queue with $e.velocity("stop", true); and reverse the animation.

What I do is adding a css class (.animated) on each element to clear and reset animations.

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);
        }

source : Velocity.js stop command

Johnathon

I tried it, but it still isn't working. Maybe I don't add the animated class correctly. How did you do it? Thnx – Dentelle