Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for 'barba'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hard to say what the issue was without seeing a demo that reproduces the error. My guess is that you're trying to use modules in an environment that doesn't support it. That's because you have the tweens inside of the function. Here's what's happening: You create the timeline. Since the timeline is not paused, it tries to play. Since there's nothing to play, it finished immediately. You then call the function. The function adds new tweens to the timeline. But the timeline is already done so it doesn't play them. What you should do instead is create the timeline with all of its tweens before the function call. Then inside of the function you use the .play() control method to play the timeline. Note that I also upgraded your code to GSAP 3 while I was at it. https://codepen.io/GreenSock/pen/QWjqWBM?editors=0010 If you want that to fire on click instead, you should prevent the default behavior of the click event and call that function. This is part of what Barba.js would do for you. Barba also loads the next page's context and updates the page history so that you can load new content without actually going to the other page(s). https://codepen.io/GreenSock/pen/WNQZNgO?editors=0010 I highly recommend that you give the GSAP Getting Started article a read as well as my article on tips to animate efficiently because it talks about using control methods.
  2. 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"); }
  3. 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!
  4. 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!
  5. 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.
  6. @bootstrap007 Have a look at this post and linked thread example as reference (no need to bump either thread with comments by the way :--) You won't able to use Barba on Codepen like that. You need to have a Pro account and create a Project instead, or do it live on your own server.
  7. Hi ZachSaucier Thanks for your time & support. I know about barba.js and the page transitions effects. You first need a way of keeping track of the position of the clicked on element. You could do that in various ways, but likely the best is to use some sort of data representation of the position state. -- Do you have any example for this please? My question was - If you click a portfolio item from the CENTER of the page then on the NEXT PAGE that item is animating exactly from the center of the screen/page( triggering the position value from the previous page) OR if you click a portfolio item from the left side of the page then on the next page it is starting the animation exactly from that left postion (same as in the previous page). This can be done in Gsap or with the help of Jquery only? Thanks Zack
  8. Of course it is! You first need a way of keeping track of the position of the clicked on element. You could do that in various ways, but likely the best is to use some sort of data representation of the position state. Then you need to transition between pages using that information. You should look into Barba.js to help you with handling page transitions and potentially posts on how to use GSAP with Barba. That's it
  9. Hi @jamaldols welcome to the GreenSock forums. This seems more like a Barba related question than GSAP. But have a look at this recent post and the linked CodePen project using GSAP 3 & Barba 2. https://greensock.com/forums/topic/22035-page-transition-with-gsap-and-barbajs/?do=findComment&comment=110399 Fork that and try building your desired result based upon that example, utilizing its a approach of leaveAnimation & enterAnimation to build your concept. Also you shouldn't need that helper.js delay function with the above approach.
  10. I finally got a simple transition working with gsap 3 & barba V2! 🎉 The transition function that worked for me looks like this: function leaveAnimation(container) { return new Promise(async resolve => { await gsap .to(container, { duration: 1, opacity: 0, }) .then(); resolve(); }); } One really simple thing that took me a while to figure out was making the enter animation work. This was fixed by just adding css to make the barba container positioned absolute: .container { position: absolute; left: 0; top: 0; width: 100%; } I'm going to leave this working example here incase anyone else needs it to reference from.
  11. Hey @ZachSaucier, really appreciate the quick response. The GSAP community is the bee's knees. Love it. I did make a post at Barba a few days ago so I'll wait to hear back from them. If I have any luck I'll post a working example here.
  12. Hey @Cameron Knight and welcome to the GreenSock forums. Your question is more focused on Barba so you may not get a clear answer here. In your demo it looks like there are 406 errors for some reason. Not sure why.
  13. Hey gang. I've been trying to get a simple page transition working using GSAP 3 and Barba.js V2 for some time now but not having any luck. All the docs and examples out there haven't seemed to help me with the latest versions. I'm not a great developer but it's become my life long goal to one day solve this I've tried 2 methods below (onComplete and .then) but no dice. I'd appreciate any help I can get! Thank you! See the full code on codesandbox.io function leaveAnimation(e) { var done = this.async(); gsap.to(e, 1, { opacity: 0, onComplete: done }); } function enterAnimation(e) { return new Promise(resolve => { gsap.to(e, 2, { opacity: 1 }).then(resolve()); }); } barba.use(barbaPrefetch); barba.init({ debug: true, transitions: [ { name: "one-pager-transition", to: { namespace: ["one-pager"] }, sync: true, leave: data => leaveAnimation(data.current.container), enter: ({ next }) => enterAnimation(next.container) } ] });
  14. Hi @Chriz welcome to the forum. I see you bumped another thread asking for examples. In case you were unaware the video series you posted above has a link to download the working files in the description (click "show more"). Please note however that the tutorial you referenced uses the older version of both GSAP and Barba. So if you are just getting started on your journey with each, then I would highly suggest using GSAP 3 and Barba v2.
  15. Ah, that's what you mean. Yes, that's just animating one element that covers the whole page The steps to create that are: Create a morph SVG animation that covers the whole screen. Create a morph SVG animation that uncovers the whole screen. When a link is clicked, prevent the default behavior and run the animation created in step 1 (potentially also start preloading the content from the new page). When that animation has finished, switch out the old page's content with the new page's content. Once the new content has been loaded, run the animation created in step 2. Does that make sense? This thread has more information on animating blobs (including one going to full screen at the very bottom of Mikel's demo): There's a handy library called barba.js that you can pair with GSAP to load the next page's content and help run your animations. In fact, the site you linked to uses barba.js and GSAP on their website (as does the barba.js site)!
  16. @akapowl thanks for the feedback, that makes sense! @ZachSaucier thanks for the help again! Time to dig deeper in both Barba and GSAP now.
  17. @mdelp Looking good. One thing I can tell you is, that the reason, why you do not need to reinit your scripts in this setup, is beacause the only script that you use (except for the barba setup) is applied to the navigation module, which is outside of the <main data-barba="container"> . This means that it does not get removed and reapplied on every transition, but stays where it is and thus does not need to be re-initiated. You will only need to re-initiate scripts that aim at elements, that are inside of the <main data-barba="container"> and thus get removed and/or replaced.
  18. @ZachSaucier my initial question in this thread was if there is a way to completely reset a timeline without reverse(); So inside the leave transition of Barba in the example I reverse the timeline, but is it possible to reset it in 0s? I tried doing tl_nav.invalidate(); but that doesn't seem to work.
  19. I've set up a quick example of my setup. Everything works and I don't need to reinit my scripts in this setup for some reason. Check https://dev.mathieudelporte.be/barba-js for my uncompiled code. It looks like the nav transition is a bit clunky though, not sure why the performance takes a hit there. I'll probably have to add a bunch of more checks and lines of code to make it bullet-proof, but if you guys could give a JS-noob some feedback it would be much appreciated!
  20. Unfortunately this doesn't really solve my problems, when I need to play a rather complex timeline at somepoint after a barba-transition. I also found that when I put the timeline as well as the command to play that timeline into the same function like this... function fireThisAfterTransition() { var scrollIndicationAnimation = gsap.timeline({ paused: true, reversed: true, force3D:true }); scrollIndicationAnimation .set('.scroll-indicator-main', { transformOrigin: "50% 0%" }) .to('.scroll-indicator-main', { duration: 1.5, scaleY: 1, ease: "expo.inOut" }) .set('.scroll-indicator-main', { transformOrigin: "50% 100%" }) .to('.scroll-indicator-main', { duration: 1.5, scaleY: 0, ease: "expo.inOut", onComplete:function(){ console.log ('Look, this is being executed...') } }) .set('.scroll-indicator-main', { transformOrigin: "50% 0%" }) ; scrollIndicationAnimation.play(); } ... and call that function after the barba-transition has ended, it works and the timeline will be animated. But this lacks the possibility to really control the timeline when I need to. Is it possible that the way barba works at this point, it is not compliant with the way GSAP's timelines are made up?
  21. Actually, locally it shouldn't be working as intendend at all, since barba's ajax requests require a server environment to be working in the first place. I am using VS-Code's local server extension for testing - but there it doesn't work as intended neither. I just tried reverting back to TweenMax v2.1.2 because I was absolutely sure, that it worked with that version - but I was proven wrong. It doesn't work with that version neither - so I guess it must be an issue related with Barba rather than with GSAP. Dang...
  22. I figured out what the problem was in my setup, specifically why my timelines would only run on the first page load. Basically Barba doesn't reinit scripts after a page transition, so you have to load them inside a barba hook. So I just did this: barba.hooks.after(() => { $('.c-hamburger').on('click', function() { $('.c-hamburger, .hamburger, .r-header').toggleClass('is-active'); tl_overlay_in.reversed() ? tl_overlay_in.play() : tl_overlay_in.reverse(); }); }); So after every page transition this gets reinitialised and all runs perfect now. This actually applies to other JS (like a slider) as well. There might be a better way to do this, but I'll do some more homework later. I do have another question though, in the onComplete hook of my page out transition of Barba I'd like to reset a timeline to its starting values, in the starting state it would be on a page load. Is there a specific function for that? tl_overlay_in.invalidate().restart(); The code above doesn't seem to work, is there something that I can use? barba.init({ transitions: [{ name: 'transition-base', leave: function(data) { var done = this.async(); gsap.to('.overlay', {left: 0, duration: .5, ease: 'cubicbezier'}); // Somewhere here or in the onComplete I need to reset a specific timeline to its starting values gsap.to(data.current.container, 0.5, { opacity: 0, onComplete: done }); }, enter: function(data) { var done = this.async(); gsap.to('.overlay', {left: '100%', duration: .5, delay: .5, ease: 'cubicbezier', clearProps: 'all'}); gsap.from(data.next.container, 0.5, { opacity: 0, onComplete: done }); } }] });
  23. Hey there! I don't know if this is or might be related but I am still going to post it here instead of opening a new thread, because I think it might be a related problem. Since upgrading to GSAP v3 I noticed some issues with timelines, too, when using with Barba.js. My transition-animations (set-up when GSAP v2.x was still in use) still work as fine as before, but when I am trying to play any timeline (even when it was set up in global scope) after the transition has finished, it won't play the animations of that timeline at all. This seems pretty odd, because onComplete-functions or .then-functions included in those timelines are being executed as expected. I hope this is somewhat understandable - don't know how to set up a codepen that would be working with barba-transitions. Any idea what the problem might be?
  24. Hey mdelp. I assume the click function is the problematic one? If so, that looks to be completely unrelated to Barba. The logic inside of the click function seems fine. Not sure what could be going wrong. Any other details or a working demo would be helpful in us aiding you.
  25. I used your example code in my Barba instance. Thats what happens: const transition = { name: 'def from Zach', sync: true, enter: ({ current, next }) => { gsap.to(current.container, next.container, { duration: 3, y: "-100vh", onStart: function() { this.targets()[0].style.zIndex = "1"; console.log("start leave"); }, onComplete: function() { document.body.removeChild(this.targets()[0]); gsap.set(this.targets()[1], { y: 0 }); console.log("complete leave"); } }); } }