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. Hey GeS. @Ihatetomatoes made some useful articles about GSAP + Barba that you should check out. The core issue here is that you are not recreating/updating the relevant ScrollTrigger and smooth scroll stuff when the new page loads. Unfortunately we don't have the capacity to fix all of the issues for you though. Some pointers related to your tweens though: tl.to(".blue", { // ... left: "-100%", ease: "Expo.easeInOut", }); It's best to use translations instead of left/right/etc. So x: "-100%". But if you have that, it's better to use xPercent. "Expo.easeInOut" is an invalid ease. You're mixing the old and the new syntax. It should just be "expo.inOut". Read more about those and other mistakes in the most common GSAP mistakes article.
  2. Hey Max and welcome to the GreenSock forums. It's pretty hard for us to help debug things without being able to see the full code and edit things ourselves. I think it would be easier if you didn't load JS dynamically and just killed and created some ScrollTriggers based on which character you want to make active. If you are going to load things dynamically, I might recommend actually switching out the content as well so you don't have to render things when they're not being used. Barba.js is a handy tool to help out with this. @Ihatetomatoes made an article on the subject and we'll release our own Barba.js + GSAP demo in the couple of weeks.
  3. Zach you totally nailed it! Switched those two statements around and everything works fine. Thank you so much for taking the time to help...I figured this wasn't a Greensock issue but it's sooo hard to not post on here when the support is always so good!! Barba does have a Slack channel but who wants to live like that?!
  4. Hey mulegoat. It's hard to debug larger projects like this. I think these statements should be switched in order for one: // Bad initSmoothScroll(data.next.container); scroll.destroy(); // Good scroll.destroy(); initSmoothScroll(data.next.container); I'm also not sure if you need this: // reinit locomotive scroll scroll.init(); Overall questions like these are not really focused on GSAP so we can't spend our time helping out too much. It might be better suited for a site like StackOverflow. If only Barba had a good forum for it...
  5. I also have a question relating to this. I'll post it here BUT do let me know if I should move this to a new thread @ZachSaucier @GreenSock I am also using barba.js with scrollTrigger and when transitioning to pages it's getting a bit mixed up and now working like it does on page load. I have a function for this that I am refiring when the new page comes in. navReveal: function() { let $elems = document.querySelectorAll('nav.main, a.logo__main'), $trigger; console.log('test 1'); if (ScrollTrigger.getById('nav')) ScrollTrigger.getById('nav').kill(); if (dev.ui.body.classList.contains('home')) { $trigger = document.querySelector('div.home__content'); } else { $trigger = dev.ui.body; } gsap.fromTo($elems, { opacity: 0 }, { opacity: 1, ease: 'none', scrollTrigger: { id: 'nav', trigger: $trigger, start: '0 center', end: '+=100px', scrub: true, markers: true, onUpdate: self => console.log('progress: ', self.progress) } }); } The issue seems to be that when I transition from page to page the trigger position is lost (as is moving about per page). The markers remain in tact but that's okay as they don't remove when you kill the scrollTrigger instance. SO. I'm wondering if from looking at the code if everything looks ok and I'm not doing anything stupid? The idea is that if the instance has already been created, then kill it, and then when it gets to the gsap.fromTo part it should be creating it (again).
  6. Hey Zach, Many thanks for your quick reply and confirmation! Yes, that makes perfect sense. I thought that was the case after reading through the docs, but just wanted to make sure. I'd not used GSAP until about two weeks ago and have been playing about in CodePen and, really, it's a must-have for me. I had tried to mess with css transitions before but found them rather laborious, but GSAP puts the fun back into the dev I'm sure I will be asking some coding questions in the next few weeks as I try to get my head round everything. I'm going to be using it alongside barba.js, and I seem to remember reading on one of the posts that you were doing a demo of this as part of the learning section. Is that still on the cards ? Many thanks again!
  7. Hi there, This is my first post and my first project with GSAP. I'm using it in conjunction with Barba.js. As barba js basically creates a single page app, im having to kill and reinitialise my scrolltriggers on each page load so that they dont keep getting initialised on top of each other. Im doing this with this code: ScrollTrigger.getAll().forEach(t => t.kill()); This is working. However i also have some scrolltriggers that are outside of my barba container (eg, inside the footer that remains constant and does not reload). These are also being killed within the above code and i need them not to be. So i believe that what i need to do is only kill the scrolltriggers contained within my barba container but not the ones outside of the barba container. Can i do this by targeting all scrolltriggers within a container div that has an id? thanks for any help
  8. Hey rootx86. It's impossible for us to tell what's going on given the information that you've provided. It's almost guaranteed to be an issue with your setup, not anything with GSAP. Unfortunately we don't have the capacity to debug every Barba project that uses GSAP. If you have a question specific to GSAP please ask and we'll do our best to help!
  9. Hey @rootx86 This is probably not related to GSAP at all, but more to the way barba.js handles things. The thing with transiton-libraries, such as barba.js is, that on transition they remove the old contents and add in the new contents. If your GSAP animations refer to any of the contents that have been removed, they will stay connected to those contents after the transition. For solving that, so you will need to put those animations you are creating inside a function and call that function after the new contents on your page have been loaded by barba ( best inside one of the hooks provided by barba ). Hope this helps. Cheers, Paul
  10. Hello GSAP Community, Here's my situation: I'm creating a website with barba.js, so it has fluid page transitions. There's a page showing all projects and a page showing all articles, they are displayed as teasers. Since the teasers are supposed to have the same behaviour and animations I gave all of them the same class to use as selector in gsap. What I try to achieve: When scrolling down, triggering a teaser, I would like to scroll to the center of that triggered teaser. So the user purposely gets stopped in his scrolling and goes one element at a time. How I try to achieve it: Basically, I am creating a ScrollTrigger for every teaser when the page is loaded. When I change the page, I call the kill method on existing scroll triggers, so they cease to exist. So when I navigate between pages I make sure the ScrollTriggers get cleaned up before creating the new one that uses the exact same function (and selectors). What my problems are: It seems like the ScrollTrigger itself is being killed – it's undefined and everything after resetting the page and does not trigger the class that is toggled by the ScrollTrigger – but when I add the scrollTo functionality it gets messy. The ScrollTrigger and scrolling to the center of the teaser works for the first page I visit, but when I change to the other page the new ScrollTrigger seems to get stuck where the old teasers were and I can't scroll the page properly (I hope the CodePen explains well what I mean). Maybe there's something obviously wrong with my code or approach? Or any advice on how to make this work as expected? It does not feel very nice to be stopped while scrolling (duh, I know), but since it's a customer requirement I was wondering if there is a way to make it feel less like a restriction but more like the user is being guided? What I already tried: I tried native scroll-snap, which would have been nice and easy to use – but it was buggy at best when it comes to it's behaviour for what I am trying to do. I had a browse through the forums here (great and helpful work all around, btw) and found a similar question, so I adapted my code roughly to the solution suggested there. I guess it feels much different since that example has full screen sections. To make sure my project setup with barba.js is the actual problem I've made a CodePen and recreated the basic things that play together here. So there's the change in page and the creation of the ScrollTrigger for the teasers on the given page, and also the scrollTo functionality. The problem still occurs in the CodePen. I hope you guys can help me out Thanks a lot!
  11. Hey rubegoldberg and welcome to the GreenSock forums. Thanks for the surprisingly minimal demo! Thank you for not including Barba and your whole setup The issue is that you can't have ScrollTriggers with duplicate IDs. IDs should be unique and you can't select multiple ScrollTriggers that share an ID for some reason using .getById() (it only returns one in that case). But if you're going to kill all of the ScrollTriggers, just use ScrollTrigger.getAll().forEach(st => st.kill()); https://codepen.io/GreenSock/pen/abNmwKm?editors=0010
  12. Would React users need Barba.js though when they can instead use React Router ? https://www.google.com/search?q=react+gsap+page+transitions
  13. Hey Vinu and welcome to the GreenSock forums. To do that sort of transition you will need to use the FLIP animation technique along with something that transitions between your page's content (like Barba.js). GSAP has a handy FLIP helper function to help with it. I am actually creating a tutorial on doing this effect right now. If you can hold out a week or so it should be on our learning section. You can follow it to receive updates
  14. Good to hear you got it working And yes. The part with data.current.container.remove(); is another barba-related thing that needs to be done in certain scenarios like yours, because there is a timespan when both - the new and the old barba-container - are in the DOM at the same time. So you need to make sure the old stuff is gotten rid of before ScrollTrigger is being applied, so it does its' magic to the right portion of the code. Again, that is not really related to GSAP per se - just to clear things up for future readers. On a side note: I love, how you melted Zach and Jack into one person named Zack
  15. Hi, Can someone help please!!!! I am currently having an issue with Barba + GSAP on page transition. It work fine on the first page, when clicking on different link the scrollTrigger doesn't work... it load the animation before scrolling to the viewport. I've tried to Reset & Kill -> contentTl.kill(true) but it didn't work. Thank you. That's the link for codepen -> https://codepen.io/william_bella/project/editor/AxLLKq
  16. Amazing, Got it working !!! Thank you guys 😁 I've used Zack's code and akapowl method - Before rendering a new page KILL all ScrollTrigger and re-initialize again. ####People who's using Barba Js + ScrollTrigger You still need to add this piece of code to make it work - "data.current.contaier.remove();" barba.init({ sync: true, transitions: [ { async leave(data) { data.current.container.remove(); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach(t => t.kill()); }, async enter(data) { // animation function }, async once(data) { // animation function }, }, ], }); Whoever need it please check my codepen link. https://codepen.io/william_bella/project/editor/AxLLKq
  17. Well, I guess that is very well more related to the way barba works, than it is a GSAP issue. You have to kill the 'old' ScrollTriggers on page transition and re-initialize them fresh on entering the new page. What worked for me was this nifty piece of code I grasped from Jack or Zach once (don't know which one of you it was) let triggers = ScrollTrigger.getAll(); triggers.forEach( trigger => { trigger.kill(); }); You will have to find the right barba-hooks for your project to kill the 'old' ScrollTriggers and re-initialize the 'new', though. Hope this helps a bit. Cheers, Paul
  18. Thanks Zach for your response. Working link should be at - https://repl.it/@eest/GSAP-and-Barba-Rules I was wondering whether the problem was with how I was using a GSAP animation. Barba seems to be running ok and the animation is initialising but not showing. It may be a Barba problem in which case it isn't appropriate for the forum. Thanks again Zach.
  19. Thank you. I received an answer on Barba github, there is an option to prevent clicks during the transition preventRunning. Somehow it solves my problem! I wouldn't know how to make a Codepen demo, it's a fiddly setup in Wordpress.
  20. Hi @ZachSaucier , nope I'm not using the markers but the markers are indicating from what i gather anyway where the animation starts so getting them in the right position is key and then turn them off . So I was just using them as a guide really , oh hahahah I found a workaround so but I'll try that either if I run into this very problem again hahaha . No I completely understand the honus is not on you as that is not your problem really , if i ever run into Barba problem again , do you have any forums I could use ? Thanks a million for your help over last few days , think I'll just about be able to launch it in large part thanks to you . Youre a sound man , see ya again i imagine lol 👌😂 Cheers Adam
  21. Decided I should leave this here and contribute for once lol 😃. Update : For anyone who might be coming to this in the future , I observed that when I resized the window the markers updated their position idk why but this is absolutely unreal because what I did was basically simulate a window resize to get the markers back to their desired locations So for anyone who comes to this and observes your scroll markers are in a different position after a Barba page transition , this is what I did I have my afterEnter hook calling a function called aboutInit to handle all page onboarding issues I'm facing, in the function what it does first is what I mentioned above checks all the classes in the DOM for gsap one's against a regex and then finds these gsap markers and removes them so now you're only left with no markers . Then I call my actual function to do the horizontal scroll effect and give me a brand new set of markers and now you're left with that set of markers in the wrong positions (as stated above - read that before continuing ). So then just simulate a window resize event to kick the markers back into their original positions then everything is in order and your animation should start and end in the right place . What I did was check the top position on just reload of the page in the right original position , then do a barba transition let all this happen above and bam left with the same top positions for the markers. Hope that makes sense . 🤙 Here is the code - aboutInit // About Page Functions const aboutInit = () => { let horizontalscrollAnim, cleanGSAP() if(typeof horizontalscrollAnim === "undefined") { scroll_facts_tl_func(); } window.dispatchEvent(new Event('resize')); } const cleanGSAP = () => { const allClasses = [...document.querySelectorAll('[class]')] let gsapArray = [] if(allClasses.length <= 134) return for (var i = 0; i < allClasses.length; i++) { if (/gsap-/.test(allClasses[i].className)) { gsapArray.push(allClasses[i].className); } else break } gsapArray.map(tag => document.querySelector(`.${tag}`).remove()) } //You don't need this but it's just so you know what I'm calling const scroll_facts_tl_func = () => { const facts = [...document.querySelectorAll('.fact')], factsContainer = document.querySelector('.factsContainer'); let xPercent window.matchMedia("(max-width: 600px)").matches ? xPercent = -85 : xPercent = -115 horizontalscrollAnim = gsap.to(facts, { xPercent: xPercent * (facts.length - 1), ease: "none", scrollTrigger: { trigger: ".factsContainer", pin: true, pinSpacing: true, // markers: true, scrub: 1, snap: 1 / (facts.length - 1), start: "top top", // base vertical scrolling on how wide the container is so it feels more natural. end: `+=${factsContainer.offsetWidth}` //4320 } }); } Helper Methods // Helper Functions const delay = (ms) => { return new Promise(resolve => setTimeout(resolve, ms)); } Barba Initialization barba.init({ sync: true, transitions: [{ name: 'transition-base', async leave() { const done = this.async(); pageTransition(); await delay(1000); done(); }, async enter() { window.scrollTo(0, 0); }, }], views: [ { namespace: 'about', afterEnter() { aboutInit() } } ], }); Here's also a Test Site I put to show what I mean just do exactly as stated to see the effect and discreptancy in the markers positions due to Barba transition 1. Go to https://testbarba.netlify.app/ 2. Click the about page - this will trigger barba transition - take note of the markers positions(end and start in the inspect element) 3. Then just reload the about page and you will notice the different positions of your markers upon load (again in the inspect element) 4. You can use above to fix this , if this is your problem Cheers Adam
  22. Right @ZachSaucier , I know you're sick of seeing my name pop up talking about GSAP and Barba Combination. The problem is BarbaJs doesn't really have a forum (well from what I could find anyway), but what I will confess to and start trying to do is debug my problems more before coming to this forum that's why yesterday I basically spent the day trying to debug my actual first problem I still can't get. I turned off all functions bar one and stepped through all variable values at all stages of DOM loading and manipulation through the Barba hooks , I identified the places I needed to add a setTimeout and also I found out which hooks come first(enter , DOM load , etc... ) and that the afterEnter hook is probably the best place to initialize anything you want because if you place a function call in there it gets called whether or not you're transitioning through Barba. As I said before I really did try to debug this time as much as possible and identified my problem I think . As I said in a earlier post , markers are added every time by GSAP on page load (which I'm guessing is how ye make the pinning possible starting at the start marker pin until the end marker and then the other two are to do with the scroll position on the page. So what I observed in the inspect element is that when you transition to a page with Barba the amount of markers doubles and so pushes down the start marker and end marker down the page causing my animation to start at a different place which is what I'm observing is happening in my site now if i go to homepage and click about , to counteract this what I have done is got rid of all the markers on page load so that GSAP can add it's new markers and not be pushed down , however I don't know how but the markers added are still getting pushed down even though they're only ones there now , what's happening is lets take this problem for example, On Normal page Load my Start Marker top - 2371px Height Of my Container that pins - 4320px End Marker top - 6691px - This works without a hitch perfectly After Barba Transition Page Load Start Marker top - 7175px Height Of my Container that pins - 4320px End Marker top - 11495px - This works at the wrong position therefore doesn't perform properly (overlapping other elements and what not) So to be clear If i didn't remove some of the markers page would look like this like it does now 2371 +4320 6691 7175 +4320 11495 Now when I clear it takes care of the first one's so you're left with this now 7175 +4320 11495 Now What I want is to move these positions to the same as page load normal that being 2371 +4320 6691 But when I tried to do this the actual top value changed / updated as the tag jumped up but seems GSAP somewhere has it defined that the animation is still getting set at the marker at 7175 so when I scroll to that position this is when it actually works but at the wrong position as already stated , further down the page . Wondering how are those markers position set and/or the way you use to identify where to start animation and how would I go about changing these positions to my desired ones on page load after barba transition. So now to your post above Zach , I intentially left out Barba Script and Barba wrapper data properties on the homepage as you said you wanted a simple but effective test case so you could see what I was on about that animation with Barba and without is different so I set Homepage as page without the Barba and the about page as page with it, as for not including all the resources you needed to carry out the experiment yourself stupidly I thought you were going to just look at my code , at the live version and work it out from there , I didn't think you were going to reverse engineer it so sorry for that in the future I will most definitely be more thorough with providing all resources if i'm asking a question on this forum. I'm sorry , this is all pretty new to me writing in forums as I haven't wrote questions before on forums as I'm normally a hard worker 100% never give up until you got it don't show someone else they are better than you guy and you'll get this . But taking a step backward from this over this year I have identified that asking for help is not a form of weakness but strength as you it's through help you get better and learn more things , otherwise you stuck in a rut for a long time leading to unfinished projects. So I have taken the leap to ask for more help I do agree however I should have debugged this issue above a bit better but I'm trying that's all I can do 🤷‍♂️. Okay what I will say and acknowledge is a huge thank you to you and the team at GSAP who work tirelessly to help us create spectacular animations and ScrollTrigger is another amazing addition to this outstanding library. Personally thank you for sorting the stupid bug I missed yesterday 🤙 Cheers Adam
  23. Hello, first I wan't to give a big thanks to gsap creators. gsap is insane and scrolltrigger is THE thing that was missing to make gsap perfect. But i have troubles with Scrolltrigger, scrolltrigger works perfectly when I load a page, but my website uses ajax transitions between pages, and I can't figure out how to make my animations works again when I navigate to another page. I don't have errors in console, but triggers just don't do anything. I tried to use the refresh() method, or kill() on my scrolltrigger instance and then reload the js, but they don't seems to do the job. My ScrollTrigger declaration looks like this : initMainAnimations() { const selector = ".feature h3, " + ".feature .img-container, " + ".feature p, " + ".feature a, " + "#see-also .other"; const targets = gsap.utils.toArray(selector); targets.forEach((target) => { ScrollTrigger.create({ trigger : target, onEnter : () => target.classList.add('active'), onEnterBack : () => target.classList.add('active'), start : "top 95%", id : 'main_scroll_trigger' }) }); } (I use barba.js for pages transitions) To be honest i'm lost and i don't really know even theoretically what to do to solve this problem. Maybe gsap can't find ajax loaded elements because of the DOM being modified ? Maybe there is a way to drop everything related to gsap and reload my js ? Maybe it's a noob's question and i'm really sorry if it's easy but i really have no idea of what to do... (sorry for bad english) Sorry i have no codepen to reproduce the case but I don't find a way to give you a small exemple of that, I can put the website online in case it helps. Let me know if you want to see more code. /* EDIT */ gsap actually find targets (it works if i log targets ) But if I set markers to true , I see that they are all on top of the page. even if I use the barba hook afterwhich fires my js after transition is fully done, gsap seems to create triggers before everything is loaded
  24. Well I tried to add a timeout but it didn't change anything... even with a giant timeout, nothing happens... As you can see markers are appearing on top of page even if i put like 10 sec timeout : Sorry to bother you with my barba.js problems....
  25. I just answered another question about Barba.js: The main issue there was that the content had not been fully loaded before recreating the ScrollTrigger. Adding a simple setTimeout for the function that created the ScrollTrigger fixed the issue. Please try doing the same thing in your project