Jump to content
Search Community

itsmeagian

Members

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by itsmeagian

    GSAP Beginner, animation not showing

    in GSAP

    Posted

    Alright update:

     

    My main problem seems to be GSAP setup, I tried with a earlier project where I had succes with GSAP and the animation worked there after changing transformOrigin from "bottom left" to "left bottom". So now the animation works! 

     

    Now I just either have to setup Barba.JS correctly or do what ZachSaucier suggested. If anyone can advocate why Barba.JS is a better solution or/and why my script from the video doesn't work, I would appreciate it very much!

     

    GSAP Beginner, animation not showing

    in GSAP

    Posted

    3 hours ago, ZachSaucier said:

    Hey itsmeagian and welcome to the GreenSock forums!

     

    It looks like you didn't follow the tutorial which uses Barba.js. Was that intentional? 

     

    If you're not going to use Barba.js, you will need to handle the link clicking behavior yourself - preventing the default behavior of the link(s) and calling the animation yourself. 

     

     

    Thank you very much! 

     

    Seems like I was a bit too quick in drafting my question and in my original post, it was indeed intentional. I followed the guide throughout and my experience with GSAP is a bit limited and none existent with Barba.js so I tried to do everything in the video and yet it didn't work. 

     

    This is what I have in my script for barba, however I never got the page transition console log in my function pageTransition() so the function is never called. 

    import barba from "@barba/core";

barba.init({
  sync: true,

  transitions: [
    {
      async leave(data) {
        const done = this.async();

        pageTransition();
        await delay(1500);
        done();
      },
    },
  ],
});


function pageTransition() {
  let tl = new TimelineMax();
  tl.to(`ul.transition li`, 0.5, { scaleY: 1, transformOrigin: "bottom left", stagger: 0.2 });
  tl.to(`ul.transition li`, 0.5, { scaleY: 0, transformOrigin: "bottom left", stagger: 0.1, delay: 0.1 });
  console.log("page transition");
}

function delay(n) {
  n = n || 2000;
  return new Promise((done) => {
    setTimeout(() => {
      done();
    }, n);
  });
}

     

     

    So at that point, I thought okay maybe I can just try to do the animation and avoid Barba.js since I can't make work but in my original post, the function is called and I get the console.log("page transition" but the animation with the yellow stripes doesn't show and I have no clue to why it doesn't. I am not sure if I missed something in my setup or the animation code itself! However, I appreciate your input and I hope it cleared up some confusing from my part!

    GSAP Beginner, animation not showing

    in GSAP

    Posted

    Hey everyone,

     

    I am trying to recreate this animation from this video about GSAP and Barba.JS: https://www.youtube.com/watch?v=aMucZErEdZg 

     

    However, the lines do not show up and I get no errors in console, can anyone shed some light on the problem? 

     

     

    My HTML 

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.scss" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TimelineMax.min.js"></script>
  </head>

  <body data-barba="wrapper">
    <ul class="transition">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

    <main data-barba="container" data-barba-namespace="home">
      <h1>Hello World</h1>
      <a href="/index2.html">Test Link</a>
    </main>

    <script src="/testscript.js"></script>
  </body>
</html>

     

     

    The CSS 

    ul.transition {
  display: flex;
  position: absolute;
  z-index: 10;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  margin: 0;
  pointer-events: none;
}

ul.transition li {
  transform: scaleY(0);
  background: yellow;
  width: 20%;
}

     

     

     

    Javascript:  

    let tl = new TimelineMax();
pageTransition();

function pageTransition() {
  tl.to(`ul.transition li`, 0.5, { scaleY: 1, transformOrigin: "bottom left", stagger: 0.2 });
  tl.to(`ul.transition li`, 0.5, { scaleY: 0, transformOrigin: "bottom left", stagger: 0.1, delay: 0.1 });
  console.log("page transition");
}

     

    See the Pen KKdvbYL by itsmeagian (@itsmeagian) on CodePen

×
×
  • Create New...