Jump to content
Search Community

itsmeagian

Members

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Everything posted by itsmeagian

  1. itsmeagian
    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!
  2. itsmeagian
    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!
  3. itsmeagian
    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"); }
×
×
  • Create New...