Jump to content

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. Codesandbox's server doesn't seem to play nicely with barba. I did this locally, and it seemed to work fine, so it should help you get started. index.js gsap.registerPlugin(Flip); let flipState; barba.init({ transitions: [ { sync: true, beforeLeave(data) { const target = data.current.container.querySelector("[data-flip-id]"); if (target) { flipState = Flip.getState(target); } }, enter(data) { const target = data.next.container.querySelector("[data-flip-id]"); if (target && flipState) { gsap.set(data.current.container, { opacity: 0, position: "absolute" }) return Flip.from(flipState, { targets: target, absolute: true, scale: true }); } } } ] }); index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="styles.css" /> <title>Static Template</title> </head> <body> <div data-barba="wrapper"> <main data-barba="container" data-barba-namespace="home"> <a href="cases.html">Cases</a> <div> <img data-flip-id="img" class="thumbnail" src="https://sun6-22.userapi.com/s/v1/ig2/awq7qUcGZAS-9dsYLrQoqJHwj9fpjNo6pi0DdawtulIcSqr6fqicNesTWXdtTwzynhR9S1oHx8G5gUyZMvOeJ12P.jpg?size=400x0&quality=96&crop=1,136,1077,1077&ava=2" alt="" /> </div> </main> </div> <script src="https://unpkg.com/@barba/core"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Flip.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js"></script> <script src="index.js"></script> </body> </html> cases.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="styles.css" /> <title>Static Template</title> </head> <body> <div data-barba="wrapper"> <main data-barba="container" data-barba-namespace="cases"> <a href="index.html">Home</a> <div> <img data-flip-id="img" class="bgimage_block" src="https://sun6-22.userapi.com/s/v1/ig2/awq7qUcGZAS-9dsYLrQoqJHwj9fpjNo6pi0DdawtulIcSqr6fqicNesTWXdtTwzynhR9S1oHx8G5gUyZMvOeJ12P.jpg?size=400x0&quality=96&crop=1,136,1077,1077&ava=2" alt="" /> </div> </main> </div> <script src="https://unpkg.com/@barba/core"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Flip.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js"></script> <script src="index.js"></script> </body> </html> You're probably going to like dynamically adding a data-flip-id attribute on click. myElement.setAttribute("data-flip-id", "img");
  2. I made a project using your link! How to connect barba via beforeLeave/leave with Flip, so that it is like in the given reference in the topic? https://codesandbox.io/s/pedantic-lake-sh77z?file=/index.html:2921-3313 I worked with before in the Fullpage plugin once, but I suffered for three days then... I haven't found an example working on this functionality yet..😟 It feels like I'm missing some theoretical point in the stage, and because of this there is a deadlock...
  3. Then you're loading them dynamically. It's impossible to transition between pages on a hard navigation change because it reloads an entirely new page. Go through their documentation. It shows GSAP usage and even their site uses GSAP. https://barba.js.org/docs/getstarted/basic-transition/ For Flip, you would probably have to save the Flip state to a global variable outside of barba's init, like inside one of the beforeLeave/leave callbacks, and then do the Flip animation in one of the enter or after callbacks. https://barba.js.org/docs/getstarted/lifecycle/
  4. By the way, I was able to connect barba, I thought I read that it is well compatible with gsap, but I can't figure out where to attach the animation yet... And I'm not lucky with examples =_= I found a description here, but with an old version of barba...
  5. I don't have time to look through all your code (in the future, please just post a minimal demo, not your whole site) but my guess is that your 2nd one is relying on elements/assets that haven't fully loaded or something like that. I'm not familiar with Barba.js but you probably need to wait for some kind of lifecycle event that basically says "okay, I'm done altering the layout of the page." and then you can call ScrollTrigger.refresh() which forces ScrollTrigger to update all its start/end values on the page. Also don't forget to kill() any ScrollTriggers when you leave a page (assuming it's a single page application).
  6. Same problem. I am using a plugin called Steroides for Elementor that include Barba.js but I can't get it work.
  7. For any future readers, I ran into a very similar problem as Adam and was able to solve it with ScrollTrigger’s getAll() and kill() functions. Added to Barba’s afterEnter hook. My ‘cleanGSAP’ function looked like this: const cleanGSAP = () => { let existingScrollTriggers = ScrollTrigger.getAll(); for (let index = 0; index < existingScrollTriggers.length; index++) { const singleTrigger = existingScrollTriggers[index]; singleTrigger.kill(false); } ScrollTrigger.refresh(); window.dispatchEvent(new Event("resize")); };
  8. I read your question a few times but I still don't quite understand what you're asking. We don't support 3rd party tools like Barba.js in these forums typically (I have zero experience with it), but we'd be happy to answer any GSAP-specific questions.
  9. I have page transitions with barba.js and a certain element is not always on the page to be animated. So gsap gives a warning that the target is not found. Can I just disable warnings in my production env. Or is there a good way to not let a certain part of the animation timeline play, when the target isn't found?
  10. Hey @jakob zabala It really depends on some things how to do what best with barba. If you navigation for example is not part of the content that is being exchanged by barba but appears on every other page you won't have to re-initialize it since it will stay in the DOM and will still be accessable by the functions you initialized on page load (or whenever in that realm). This sounds like the right apporoach to me for everything that needs to be re-initialized. These forums really try to stay more focussed on GSAP related questions. But there are quite some threads in combination with barba and ScrollTrigger in these forums - maybe you can take some of those as inspiration (using the search in the upper right area of the page). Here is one of those I also remember one earlier thread where a user has posted his code as an example One other recommendation would be the learning resources by @ihatetomatoes that he linked to himself in this thread here https://ihatetomatoes.net/demos/barbajs/ Barba also has a really great and responsive slack-channel where you can find all sorts of help. You can find an invite link on top of that page here: https://barba.js.org/api/ Hope altogether this will help you get further with your barba-project(s) - it sure did help me
  11. I've been using GSAP for a couple of month now and i really really enjoy it! Right now, i'm working on my portfolio using Barba.js for page transitions. I have a little question that might sound weird for a non-beginner but here it is : Let's say i have a long page with a lot of content. How do you animate only the elements that are visible in the viewport when leaving the page ?
  12. Hey @Perdixo75 That is really more of a general JS and barba-related question and usually these forums try to stay focussed on things that are directly related to GSAP. What you would have to do before animating is checking for which of the elements that you want to animate are in view currently - for example with a helper function similar to the one explained here That could then look something like this https://codepen.io/akapowl/pen/5d29bd576ad634a694103346560caf3c Of course you would have to tweek it to your liking, because as of now it will only trigger on elements that are completely in view. If you have any other questions directly related to GSAP, we'll be happy to help. Happy tweening. Edit: Of course you could also utilize GSAP's ScrollTrigger to handle the in-view-checking like maybe so https://codepen.io/akapowl/pen/6158772cb43f78df7bc8c2fbcdfa83cf
  13. Hello @Jloafs Many have had their issues with barba resolved - for example those, that I linked to above. And as also mentioned above: You will [(likely)] have to kill off the old ScrollTriggers in a barba hook when transitioning to another page, and create all neccessary ScrollTriggers for the next page from scratch after transitioning. You will find examples on how to do that and some more explanation on the why in the threads [linked to].
  14. I'm having the same problem with Barba and scrolltrigger but don't want to abandon Barba. Has anyone had that same problem and found a solution? I'm new to gsap and javascript too btw so not an advanced user by any stretch of the imagination
  15. Hi there, I noticed that after going from one page to another the custom mouse starts to lag. At first it's hard to notice but as you load 4 or 5 pages the mouse doesn't flow as smoothly as on the first page load. Am I missing anything that is making the mouse lags? I'm using Barba JS on the site so I'm not sure if I have to kill and restart the mouse function every time I transition between pages? Here's the link to my project: https://codepen.io/rochudo/project/editor/ZgGnON Thanks
  16. Hi, guys! I'm relatively new to the GSAP world and this is my first post over here. I'm trying to make something that I feel it's super simple, it would be an effect similar to https://www.marvinschwaibold.com/projects/'s hover effect (image reveal, following the mouse position, background color change) + the transition to its internal page (I'm assuming it involves barba.js, right?) Any tips will be much appreciated!
  17. Hi @mrntld Welcome to the forum. We have several threads about follow by mouse. Here's a good one. The background color change should be fairly straightforward. If you're just getting started with GSAP, this is the pace to begin. I'm not sure if they're using barba.js, but that's probably a good guess. Our very own @Ihatetomatoes has a bunch of videos on that topic. If you have any GSAP specific questions as you work on your project, we're happy to help. A demo will give you the best chance at a detailed answer. More info about that. Happy tweening and welcome aboard.
  18. Hi, I was also having the same issue with scrollTrigger markers being pushed down after going back to the original page using barba transition, which leads to undesired behaviors on my animation. What I found is that the elements top position in the barba-container (the one barba switch between transitions) is pushed down, you can see that by logging getBoundingClientRect() in barba hooks and thus, leads to the pushed down markers. I guess scrollTrigger calculates the start and end positions based on these values under the hood (correct me if I'm wrong). One of the possible cause I found in barba docs is that during the transition, both containers of the previous and current page will exist at the same time on the DOM, so the elements in the current page may be pushed down by the elements in the previous page. Barba suggest to use data.current.container.remove() to manually remove the previous container and fix this issues. I used it in the afterLeave hook and it works just fine. Basically, I don't need to call kill() or refresh() before re-initialize the scrollTrigger and also I think it can works if you re-initalize it in afterEnter() hook as well and not neccessary have to be beforeEnter(). The relevant section in barba docs can be found here: Barba. P/s: sorry for my bad English, it is not my first language and I'm still learning it.
  19. two days later I did it. I wonder what it didn’t work .... maybe I made a mistake somewhere before! I've already seen such a solution on the forum. but can anyone come in handy barba.hooks.beforeLeave(() => { ScrollTrigger.getAll().forEach(trigger => trigger.kill()) }); barba.hooks.after(() => { initScrolling(); });
  20. sorry. I mean they are not deleted in html if you look in devtool. I've tried all the barba hooks but the triggers remain. that's why I created triggers separately from animation. they are so removed, but not created and there is no control over the animation. anyway, thank you very much for trying to help me.
  21. What do you mean by this? Also keep in mind that this is a GSAP forum. Given the issue seems to be primarily stemming from the usage with Barba, I don't know how much free support we can offer. My guess is that with the right combination of Barba hooks it will work well. I haven't used Barba much.
  22. Hey @pietM That's actually hard to tell without seeing the full code, as Zach already mentioned - in your codepen demo you don't have any killing/destroying going on. Have you tried a method similar to what is described in this thread (which is for barba - but I guess the core concept would apply for swup, too) ? I don't think a simple re-initiation as you described in your original post will be enough, you will also have to make sure to kill the old ScrollTriggers - and it would probably also be best to destroy the old locomotive-scroll instance before creating a new one. I'll also link to the recently added section in the most common ScrollTrigger mistakes article, so any future readers who stumble upon this and don't know why that is neccessary can get a quick explenation on that.
  23. Hey @Kyle Craven and welcome to the GreenSock forums. No, we haven't been able to get to a more full tutorial with Barba.js yet (though I started work on it a while back). The closest thing currently is the introduction/overview video in the Flip docs. That along with the Flip how-to pens and showcase should get you started. If you have a specific question please ask! It'd probably be best to start a new thread though
  24. FLIP is pretty new for tutorials, only a few months old. Could be some, but I still don't know about them. As for barba.js you can check out ihatetomatoes. He also have some other nice courses on gsap. https://ihatetomatoes.net/get-barba-101/
  25. @ZachSaucier are there any tutorials yet on using Flip with Barba.js?