title: Page animation with gatsby, transition-link and gsap
body: <p>I'm new to gatsbyjs and i'm trying to do a custom page animation.</p>
  
  <p>I found a plugin name transition-link with gatsby => <a href="https://www.gatsbyjs.org/packages/gatsby-plugin-transition-link/" rel="nofollow noreferrer">Plugin</a></p>
  
  <p>Basically what I want to do is a custom swipe animation like this one : <a href="https://gatsby-plugin-transition-link.netlify.com/" rel="nofollow noreferrer">demo-site</a> when you "Go to page 2 that way  and animate in the next page". Custom because I want it to come from the top right corner to take the whole page when open and when close the same effect but revert.</p>
  
  <p>I really don't know if I'm in the good direction (not really use to js and even more to animation but right now I have the following code) :</p>
  
  <pre><code>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});
      }     
  &lt;TransitionLink 
                  to={link}
                  exit={{
  
                    }}
                  entry={{
                      trigger: ({ node, e, exit, entry }) =&gt; animationClose(node),
                    }}
                  &gt;
                  &lt;img src={logoClose} id="closeMenu" alt="fermeture du menu"/&gt;
       &lt;/TransitionLink&gt;
  </code></pre>
  
  <p>So my node trigger by my entry fonction do the good movement but my background is white. I want to have as my background my node trigger by exit but i can't find a way to have it visible while the animation trigger during the entry is happening.</p>
  
  <p>Thank's in advance!</p>