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. Hi there, okay so thank you @ZachSaucier for your advice on what to do next with my situation. So I've made a little test , minimal and I think complete which shows the difference in the reaction of scrollTrigger with and without BarbaJS enabled on the page. So I have a homepage which has horizontal scroll perfectly available and working then I include a button to click the about page , click the button and brought to the about page (same animation but doesn't give you the same result) only able to scroll halfway across and not able to reach the footer. Wondering why this is the case and what can I do to combat the differences in the adjustment of the dimensions of the page made by Barba. Here's the site - https://testbarba.netlify.app/ Here's the code - index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js"></script> <script defer src="main.js"></script> <title>Document</title> </head> <body> <div class="container"> <div class="page one">One</div> <div class="page two">Two</div> <div class="page three">Three</div> </div> <div class="about_btn_container"> <a href="about.html">About</a> </div> <footer> All Rights Reserved &copy; Adamoc 2020 </footer> </body> </html> about.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js"></script> <script defer src="https://unpkg.com/@barba/core"></script> <script defer src="main.js"></script> <title>Document</title> </head> <body data-barba="wrapper"> <div class="container" data-barba="container" data-barba-namespace="about"> <div class="page one">One</div> <div class="page two">Two</div> <div class="page three">Three</div> </div> <div class="about_btn_container"> <a href="about.html">About</a> </div> <footer> All Rights Reserved &copy; Adamoc 2020 </footer> </body> </html> main.js const scrollAnimation = () => { let pages = [...document.querySelectorAll('.page')] gsap.to(pages, { xPercent: -100 * (pages.length - 1), ease: "none", scrollTrigger: { trigger: ".container", pin: true, markers: true, scrub: 1, snap: 1 / (pages.length - 1), // base vertical scrolling on how wide the container is so it feels more natural. end: () => "+=" + document.querySelector(".container").offsetWidth } }); } scrollAnimation() barba.init({ sync: true, transitions: [{ name: 'transition-base', async leave() { const done = this.async(); await delay(1000); done(); }, async enter() { window.scrollTo(0, 0); }, }], views: [ { namespace: 'about', beforeEnter(data) { }, afterEnter() { scrollAnimation(); }, } ], }); Cheers Adam
  2. 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")); };
  3. I am trying to make a simple overlay transition effect with barba and gsap. when I click on the Page 02 link the overlay transition effect move across the page from left to right but the page did not change, I will have to click on the link the second time for the page to change how can I fix this thanks. Barba.Pjax.start(); var FadeTransition = Barba.BaseTransition.extend({ start: function() { Promise .all([this.newContainerLoading, this.fadeOut()]) .then(this.fadeIn.bind(this)); }, fadeOut: function() { const TransitionPromise = new Promise(function(resolve){ const OutTransition = new TimelineMax(); OutTransition // .set(".cover", {display:"block", y:"100%"}) .to(".cover", 0.5, {width: "100%", ease: Power2.easeOut}) .to(".cover", 0.5, {width: "0", left:"100%", ease: Power2.easeOut}) //.set(".cover", {display:"none"}); }); return TransitionPromise; }, fadeIn: function() { let _this = this; //TweenLite.set(this.oldContainer, {display:"none"}); TweenLite.to(this.newContainer, 0.1, {opacity:1, onComplete:function(){ _this.done(); } }); } }); Barba.Pjax.getTransition = function() { return FadeTransition; };
  4. 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.
  5. 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?
  6. 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
  7. 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 ?
  8. 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
  9. 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].
  10. 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
  11. 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
  12. 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!
  13. 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.
  14. 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.
  15. 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(); });
  16. 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.
  17. 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.
  18. 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.
  19. 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
  20. 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/
  21. @ZachSaucier are there any tutorials yet on using Flip with Barba.js?
  22. Hey! By far, the BEST GSAP lessons you can get is Bella by @Ihatetomatoes Petr is a great teacher and not only you will learn super GSAP and ScrollTrigger techniques, but you will learn how to properly structure code, how to implement Barba and LOT more. It catapult me to another level. Highly recommended 👍
  23. Please help how i can implement WordPress and Barba do you have any source code I can look at? or learning resources?
  24. Hey, Personally, I don't use jQuerry. I see no reason for it, mostly if not entirely made of syntactic sugar. Using Vue, Nuxt, Tailwind, plain ol' JS (also express, node, mongodb/firebase/sqlite.) Depending on what you need I guess. If I go without vue, I tend to gravitate towards highway.js and barba.js for transitions.
  25. Hello!! I have a quite heavy question I'm working on my portfolio website using ScrollTrigger / horizontal scrolling. Everything was working absolutely fine until i installed webpack in the project recently. I needed to install it because i also use barba.js for transitions and webpack makes it so easier to handle the scss from page to page when clicking a link to go to another page of the site (no need to code for stylesheet injection in the head tag of the new html page when a link is clicked). And indeed it's working! BUT very oddly, when starting the project, now i do not land at the top of the page but somewhere in the middle and it's impossible to scroll! ScrollTrigger seems to be the issue here, because the barba transitions are working fine... What happens is: when landing on the page, i see a short flash of the raw html starting from the top (cool) and then (when the JS file is loaded) i get to a certain portion of the website, depending on the xPercent i put in my horizontal-scrolling function...(xPercent: -100 gets me at the 1st section, -200 at the second, -300 at the middle of the site etc... and impossible to scroll.) I tried everything and cannot figure out why/how to fix this. Would you have an idea why this is happening? Any help/hint/link would be highly appreciated! i learned a lot from this forum sofar, maybe my case can help someone else in the future ^^ Thank you! ps: my html and js files are very long, i hope i'm not too much of a hassle... ps2: here is a link to a tweet i posted in december where you can see the scrolltrigger/horizontal scrolling working smoothly in the project. (https://twitter.com/Nightcoder2/status/1333666647429816320)