Infinite GSAP draggable slider

DragSlides.js

(function ($, window, undefined) {

    var App = (window.App === undefined) ? (window.App = {}) : window.App;
    (App.Views === undefined && (App.Views = {}));


    App.Views.DragSlides = Backbone.View.extend({
        el: '.dragslides',
        initialize: function () {
            if (!this.$el.length) {
                return false;
            }
            var _this = this;
            this.$el.each(function (index, element) {
                _this.createDragSlide($(element));
            });

            this.$window = $(window);
            this.$window.on('resize', function () {
                _this.trigger('resize');
            });

        },

        createDragSlide: function ($holder) {
            /*
            * The DOM should be in following three
            *   $holder
            *   $elements-container
            *   $elements [array]
            * */

            var _this = this;

            var holderWidth = $holder.outerWidth();

            var $proxy = $('<div />');
            $holder.append($proxy);

            var $container = $holder.children().first();

            $container.append($container.contents().clone());

            var containerWidth = this.getContainerTotalWidth($container);

            this.on('resize', function () {
                holderWidth = $holder.outerWidth();
                containerWidth = this.getContainerTotalWidth($container);
                TweenLite.set($container, {width: containerWidth});
                dragUpdate();
            }).trigger('resize');

            Draggable.create($proxy, {
                type: 'x',
                trigger: $container,
                onDrag: dragUpdate,
                onThrowUpdate: dragUpdate,
                throwProps: true,
                dragClickables: true,
                onDragStart: onDragStart
            });

            var speed = 100;
            var startPosX = 0;
            var endPosX = -containerWidth / 2;

            var speedModifier = parseFloat($holder.data('speed'));
            if (speedModifier) {
                speed = speed * Math.abs(speedModifier);
            }

            if (speedModifier && speedModifier < 0) {
                startPosX = -(containerWidth / 2);
                endPosX = 0;
            }

            var initialTween = TweenMax.fromTo($container, speed,
                {
                    x: startPosX,
                    immediateRender: true
                }, {
                    immediateRender: true,
                    x: endPosX,
                    repeat: -1,
                    ease: Linear.easeNone,
                    onOverwrite: function () {
                        console.log('overwrited');
                    }
                });

            var shouldResetScrolling = true;
            $container.hover(function () {
                shouldResetScrolling = initialTween.isActive();
                if (shouldResetScrolling) {
                    initialTween.pause();
                }
            }, function () {
                if (shouldResetScrolling) {
                    initialTween.resume();
                }
            });

            function onDragStart(event) {
                initialTween.kill({x: true});
                TweenLite.set($proxy, {x: $container.get(0)._gsTransform.x});
                shouldResetScrolling = false;
                this.update();
            }

            function dragUpdate() {
                var newX = this.x % (containerWidth / 2);

                if (newX > 0) {
                    newX = newX - (containerWidth / 2);
                }
                // if (newX && newX !== this.x) {
                TweenLite.set($container, {x: newX, overwrite: !shouldResetScrolling});
                this.x = newX;
                // }
            }
        },

        getContainerTotalWidth: function ($container) {
            var totalWidth = 0;
            var $children = $container.children();
            $children.each(function (index, element) {
                totalWidth += $(element).outerWidth(true);
            });
            return totalWidth;
        },

        getContainerTotalWidth2: function ($container) {
            var $children = $container.children();
            return $children.first().outerWidth() * $children.length;
        }

    })

})(jQuery, window);