Анимация страницы с помощью gatsby, transition-link и gsap - PullRequest
Новая
       32

Анимация страницы с помощью gatsby, transition-link и gsap

0 голосов
/ 03 марта 2020

Я новичок в gatsby js, и я пытаюсь сделать пользовательскую анимацию страницы.

Я нашел переходную ссылку имени плагина с gatsby => Плагин

В основном я хочу сделать пользовательскую анимацию, например, такую: demo-site , когда вы "Go на страницу 2 таким образом ? и анимируете на следующей странице". Пользовательский, потому что я хочу, чтобы он шел из верхнего правого угла, чтобы взять всю страницу при открытии и при закрытии того же эффекта, но вернуться.

Я действительно не знаю, в правильном ли я направлении (не на самом деле используйте для js и даже больше для анимации, но сейчас у меня есть следующий код): 

function animationClose(node, e,exit,entry){
        if(window !=="undefined") {
            var w = window.innerWidth; 
            var h = window.innerHeight;}
        var tl = new TimelineLite(); 
        tl.from(node,1,{x:-w,y:h}).to(node,1,{ x: 0,y:0});
    }     
<TransitionLink 
                to={link}
                exit={{

                  }}
                entry={{
                    trigger: ({ node, e, exit, entry }) => animationClose(node),
                  }}
                >
                <img src={logoClose} id="closeMenu" alt="fermeture du menu"/>
     </TransitionLink>

Так что мой триггер узла по моей функции входа делает хорошее движение, но мой фон белый. Я хочу иметь в качестве фона триггер моего узла при выходе, но не могу найти способ, чтобы он был видимым, когда происходит триггер анимации во время входа.

Заранее спасибо!

...