Как создать плавный переход на страницу с TweenMax? - PullRequest
Новая
       8

Как создать плавный переход на страницу с TweenMax?

0 голосов
/ 06 января 2019

Я пытаюсь создать плавный переход на страницу, используя jQuery Ajax и GSAP TweenMax.

Для начала я настроил простую анимацию постепенного исчезновения, чтобы оживить новую страницу: 

$.ajax({
    url: href,
    success: function(data) {
        // Do animation
        console.log('ajax call success');
        console.log(data);

        $('.main').fadeOut(250, function() {
            var newPage = $(data).filter('.main').html();
            $('.main').html(newPage);
            // window.history.pushState(null, null, href + '#reloaded');
            $('.main').fadeIn(250, function() {
                window.location.reload();
            });
        });
    },
    error: function(err) {
        console.log(err);
    }
});

Над кодом будет срабатывать при нажатии кнопки, и это работает, вероятно. Но я бы хотел сделать еще один шаг вперед с GreenSock TweenMax. Я хотел бы добиться следующего.

На обеих страницах есть .preloader div с шириной 0%: 

.preloader {
    height: 100%;
    width: 0;
    background: #120047;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}

При нажатии кнопки .preloader должен быть анимирован до 100% ширины. Я сделал это с: 

TweenMax.to(preloader, 0.5, {
    width: $(window).width(), 
    right: 0, 
    ease: "snappy",
    onComplete: function() {
        var newPage = $(data).filter('.main').html();
        $('.main').html(newPage);

        TweenMax.set(preloader, {
            width: $(window).width()
        });

        TweenMax.to(preloader, 0.5, {
            width: 0,
            right: 0,  
            ease: "snappy"
        });
    }
});

Таким образом, с кодом выше, .preloader будет анимирован с левой стороны до 100% ширины. После завершения анимации контент добавляется на страницу. Затем предварительный загрузчик этой страницы должен перекрывать всю страницу, а после загрузки содержимого анимировать ширину обратно до нуля. Возможно, это пока не работает, потому что после добавления нового контента на страницу вы увидите переход по умолчанию (поэтому без перехода).

Если в оверлее можно даже анимировать анимацию, перезагрузите страницу и сразу оживите оверлей - это конечное желание.

Обновление

Я написал правильный код для достижения выше, но все еще есть проблема. Анимация работает с index.html до about.html, но с about.html до index.html анимация не выскользнет, ​​а будет сложным переходом. 

var preloader = $('.preloader');                
            TweenMax.to(preloader, 0.5, {
                width: $(window).width(), 
                right: 0, 
                ease: "smoothInOut",
                onComplete: function() {
                    // preloader.remove();

                    var newPage = $(data).filter('.main').html();
                    $('.main').html(newPage);

                    TweenMax.set(preloader, {
                        width: $(window).width(), 
                        onComplete: function() {
                            TweenMax.to(preloader, 0.5, {
                                width: 0,
                                left: 0,  
                                ease: "snappy", 
                                onComplete: function() {
                                    window.location.reload();
                                }
                            });
                        }
                    });
                }
            });
...