GSAP multiple element timeline hover in/out effect

GSAP multiple element timeline hover effect.js

// Creates the element timeline
    function bucketAnimation(element) {
        var tl = new TimelineMax(),
            bucket = $(element);

        tl
            .to(bucket.find('p'), .5, { opacity: 0 })
            .to(bucket.find('ul'), 0, { opacity: 1 })
            .staggerFrom(bucket.find('li'), .4, { opacity: 0, y: 100, ease: Back.easeOut }, .15);
        return tl;
    }

    // Plays the element timeline
    function bucketIn() {
        if (!this.animation) {
            this.animation = bucketAnimation(this);
        } else {
            this.animation.play().timeScale(1);
        }
    }

    // Reverses the element timeline
    function bucketOut() {
        this.animation.reverse().timeScale(4);
    }

    // Trigger the timeline 
    $('.cta_buckets .bucket').hover(bucketIn, bucketOut);