5
\$\begingroup\$

I've been working on this site.

The designers original inspiration for the column layout came from this site. I've been trying to get the animation as smooth as possible, to match the smoothness of the site referenced; but it's still choppy.

(function ($ , window, document ) {
    var c,page,href,pagewidth,
        previousTarget = null,
        pageinner = $('#pageinner'),
        body = $(document.body);

    $(document).ready(function() {
        if (window.history && window.history.pushState) {
            window.history.pushState('#', null, './');
        }
    });

    $(window).on('resize',function() {
        pagewidth = Math.round(($(window).width()));
        console.log(pagewidth);
    }).trigger('resize');

    $(document).on('click', '.close-button', function(event) {
        previousTarget = 'close';
        event.preventDefault();
        switch ($(this).attr('data-page')) {
            case 'foundation':
                $('#bar1').click();
                break;
            case 'social':
                $('#bar2').click();
                break;
            case 'news':
                $('#bar3').click();
                break;
            case 'locker':
                $('#bar4').click();
                break;
            default:
                return;
        }
    });

    $('#bar1').click(function(){
        pageinner.load("<?php echo get_site_url() ?>" + $(this).attr('data-page') + ' #page').show();
        if(this===previousTarget || previousTarget === 'close') {
            c = -(Math.round(pagewidth / 5));
            run(1);
            History.back();
            body.removeClass('page').addClass('home');
            pageinner.addClass('closed').children().remove();
            previousTarget=null;
            return true;
        } else {
            $('#carousel').css({'background':'transparent'});
            c = Math.round(pagewidth / 5);
            run(1);
            history.pushState({}, '', $(this).attr("data-page"));
            setTimeout(function(){
                body.removeClass('home').addClass('page');
                pageinner.removeClass('closed');
                $('#bookCarousel').slick({
                    centerMode: true,
                    centerPadding: '0',
                    slidesToShow: 5,
                    focusOnSelect: true,
                    autoplay:false,
                    autoplaySpeed:5000
                });
            },1000);
            previousTarget=this;
            return false;
        }
    });

    function run(b) {
        var d1 = $.Deferred(),d2 = d1,d3 = d1,d4 = d1;

        document.body.classList.add("wait");

        $.when(d1, d2, d3, d4).done(function() {
            document.body.classList.remove("wait");
        });

        switch (b) {
            case 1:
                move('#bar2').ease('in-out').add('margin-left', c * 3).duration(750).end(function () {
                    d1.resolve();
                });
                move('#bar3').ease('in-out').add('margin-left', c * 2).duration(750).end(function () {
                    d2.resolve();
                });
                move('#bar4').ease('in-out').add('margin-left', c).duration(750).end(function () {
                    d3.resolve();
                });
                break;
            case 2:
                move('#bar1').ease('in-out').add('margin-left', c * -1).duration(750).end(function () {
                    d1.resolve();
                });
                move('#bar2').ease('in-out').add('margin-left', c * -1).duration(750).end(function () {
                    d2.resolve();
                });
                move('#bar3').ease('in-out').add('margin-left', c * 2).duration(750).end(function () {
                    d3.resolve();
                });
                move('#bar4').ease('in-out').add('margin-left', c).duration(750).end(function () {
                    d4.resolve();
                });
                break;
            case 3:
                move('#bar1').ease('in-out').add('margin-left', c * -1).duration(750).end(function () {
                    d1.resolve();
                });
                move('#bar2').ease('in-out').add('margin-left', (c * 2) * -1).duration(750).end(function () {
                    d2.resolve();
                });
                move('#bar3').ease('in-out').add('margin-left', (c * 2) * -1).duration(750).end(function () {
                    d3.resolve();
                });
                move('#bar4').ease('in-out').add('margin-left', c).duration(750).end(function () {
                    d4.resolve();
                });
                break;
            case 4:
                move('#bar1').ease('in-out').add('margin-left', c * -1).duration(750).end(function () {
                    d1.resolve();
                });
                move('#bar2').ease('in-out').add('margin-left', (c * 2) * -1).duration(750).end(function () {
                    d2.resolve();
                });
                move('#bar3').ease('in-out').add('margin-left', (c * 3) * -1).duration(750).end(function () {
                    d3.resolve();
                });
                move('#bar4').ease('in-out').add('margin-left', (c * 3) * -1).duration(750).end(function () {
                    d4.resolve();
                });
                break;
            default:
                return;
        }
    }
})( jQuery, window, document );

I've gone through numerous iterations of the code to get it to this point and previous attempts I've posted on Codepen, here, and here, and here.

Anyone have any thoughts on what I can do to smooth out the transition further?

\$\endgroup\$
1
\$\begingroup\$

If you only support modern browsers, use CSS3 animations instead. And rather than margin-left property, use transform (translateX), as it's one of the best performant properties for animation

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.