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 Zofia, I don't think it not working anymore is related to GSAP or ScrollTrigger but rather to how Svelte works. I'm logging out the element that you are targetting as the trigger here and except for the first load it will always target the one on the page you left and not the one on the page you are going to. I can only speak from my experience with barba.js where both 'pages' will be in the DOM at the same time for a certain duration so you somehow have to work around that when wanting to target things on the new page - this looks like it might a similar case. So you might have to find out how to target only elements on the new page in Svelte when doing transitions. https://stackblitz.com/edit/sveltejs-gsap-220222-b-dtnpbb
  2. Hi Guys, I have been having the same problem and I think I figure it out, this worked for me: Pack all your animations on one single function and call the function once your site load something like: initGsap(); function initGsap(){ // All gsap animations with ScrollTrigger and/or ScrollSmoother } On barba.js init function place this and on the After hook call you initGsap function: async afterLeave(data) { let triggers = ScrollTrigger.getAll(); triggers.forEach(function (trigger) { trigger.kill(); }); }, async after(data) { initGsap(); } And that's it, you will remove the scrollTrigger methods and then reload all your animations. Hope that helps (sorry for my bad english)
  3. Hi! @akapowl helped me out yesterday to get pinned animation working with Locomotive and Barba, but after that i've realised that pinSpacing is not working as expected after going to the other page and coming back. https://stackblitz.com/edit/web-platform-vhx7k3?file=index.html,styles.css,index.js Also, the animation jumps on mobile, and if remove the code below it works but it is extremely jittery. pinType: container.querySelector('[data-scroll-container]').style .transform ? 'transform' : 'fixed',
  4. Thanks again @akapowl, i wasn't aware of the duplicate, i found out it is because the barba container must be inside the locomotive container. I hope i can do it. Thanks!
  5. The problem is, that with your order of execution you are not sticking to the order that is neccessary for things to work properly. The code for implementing locomotive-scroll to work with ScrollTrigger via .scrollerProxy() that you likely got from the example on the .scrollerProxy() documentation page has comments; one of them (at the very end) says: // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh(); So you would either have to make sure to stick to the order provided in there to begin with, or you will need to call ScrollTrigger.refresh() again after all your ScrollTriggers have been created. I just quickly threw a .refresh() call at the very end of your Stuck() function, just to show the difference it makes. https://stackblitz.com/edit/web-platform-ydejfq Also, you may not have noticed that you actually appear to be creating more and more instances of locomotive scroll with every page-transition, so that is something I would concentrate on fixing first, because it is the most likely to throw things off with regard to ScrollTrigger in the long run. But as Jack already mentioned, neither locomotive-scroll nor barba.js are GreenSock products, so that is nothing we can help with. Good luck with the project!
  6. Hi @Ocamy. LocomotiveScroll and Barba are not GreenSock products, so we can't really support those here. Sorry. If you have any GSAP-specific questions and can provide an isolated minimal demo that's not using 3rd party tools like that (which are likely the culprits of the problems), we'd be happy to take a peek. You are welcome to post in the "Jobs & Freelance" forum if you'd like to find paid support/consulting. As for the mobile stuff, you could try setting ScrollTrigger.config({ignoreMobileResize: true}) and maybe even ScrollTrigger.normalizeScroll() to see if it helps. Good luck!
  7. You have to update your wrapper and content on barba transition i dispatch new custom event with detail of next barba container then in class where i have my smooth scroll i listen to that event and update wrapper and content. i hope this helps.
  8. Hi tractaNZ, I'm a little unclear about what you're asking here. This really isn't the best place to ask about barba's API, but I would assume that if you transitioned to a new page, then you would need to create your ScrollTriggers again. It's whole a new set elements, so even if your previous ScrollTrigger instances were stored in memory, refreshing isn't going to do anything as those elements don't exist anymore. And you don't need to include a function inside the same file to call it. Assuming you didn't nest scrollFunction inside another function, it should be global. If not, you can always make it global. window.foo = () => { console.log("hello"); }; // in another file foo(); // hello // or window.foo();
  9. If the GSAP timeline is not finished, when I load the next/previous post with Barba, it breaks. This is the problematic transition. Can anyone spot what's wrong here? Thank you { name:"next", leave({ current, next, trigger }) { return new Promise(resolve => { const timeline = gsap.timeline({ onComplete() { current.container.remove() resolve() } }) const image = current.container.querySelectorAll(".photo") timeline .to(image, { opacity: 0 }, 0) }) }, beforeEnter({ current, next, trigger }) { return new Promise(resolve => { const timeline = gsap.timeline({ onComplete() { resolve() } }) const image = next.container.querySelector(".photo img") timeline .to(image, {opacity: 1}, 0) }) }, enter({ current, next, trigger }) { return new Promise(resolve => { const timeline = gsap.timeline({ onComplete() { resolve() } }) const charge = next.container.querySelector("#charge") const years = next.container.querySelector(".years") timeline .set(charge, {opacity: 0, x: "-100%"}) .set(years, {scale: 0}) .to(charge, {opacity: 1, x: 0}, 0) .to(years, {scale: 1}, 1) }) } }
  10. Hi guys! I'm learning GSAP a few months, with the help of community, this is my first work using GSAP, in progress yet. Thanks all for help! And i have another question, about page transitions, shared element transitions between pages. See website reference at link: https://alfacharlie.co/ See the effect of transitions between pages, the softness the animations. I used the barba.js in html + css and it worked, but not working fine in wordpress, someone to help me achieve page transitions in wordpress site?
  11. You are still creating all the other ScrollTriggers in a global hook though and you've got a couple of warnings hinting you about that on the subpage. I don't have the time to dig in deep, but honestly I don't think it's an easy fix like that. Because of how you are handling things (e.g. as mentioned above) you are creating some problems. One of them being that you are not keeping the proper order for the execution of things with regard to ScrollTrigger to work with locomotive-scroll. And I'm pretty sure that with the way you are handling things, you are also creating a new instance of locomotive scroll on every page transtion if you haven't noticed, thus you might have to kill the old one. Also barba will have the current container and the next container in the DOM at the same time when that hook you created in the view fires, so you might have to remove the current container in a global hook before you create new ScrollTriggers or else their positions won't be set correctly - or rather: they will be set correctly by ScrollTrigger, but they will not be where you think they are because of that. Those are just the things that I can think of off the top of my head - there might be other things at play on top of that here. But there is just too much involved for me to offer any more help than that. You are trying to combine three libraries that need rather careful handling to work as intended on their own already, and getting them to work together needs you to be extra careful with the order of execution - most of it comes down to the logic of how barba works in the end, and that is nothing I can guide you with.
  12. Forgive me for resurrecting this thread... getting so very close here, and learned a ton in the last few days of reading/experimenting! @akapowl I responded to your advice about running two different sets of JS for the two pages in my project. I'd read about barba views before and think I've got my head around them after some great help from @Ihatetomatoes Youtube piece on views! (thanks!) Added the 'view' on line 91 (tried to minimise this project down as much as possible!) https://stackblitz.com/edit/web-platform-dyckmk?file=js/main.js Got the second page JS to load as a function within this view, but at the expense of breaking the ScrollTrigger pinned sidebar tween. I've a strong idea the fix is about refreshing ScrollTrigger in some way... have tried to work out the right place to do this/connect the Barba/GSAP plumbing properly - but alas after studying all the help out there and scouring this forum I'm struggling to identify where this needs to happen. Thinking maybe it's simply a case of finding the right place to add ScrollTrigger.refresh(); ? (Tried adding a barba 'Enter' sub-hook within the same 'view' but no joy.) Feels like my brain is experiencing that 'freeze' right before a thaw of understanding hits! Appreciate I'm still in tenuous GSAP connection territory here, but as this is linked to getting ScrollTrigger to work on the second page (in my view at least, pun intended!) I thought I might just sneak it in 😬🤠😨
  13. Here is the transition stripped down to a minimum (actually built up from scratch to a minimum from that other stackblitz of mine). This took me way longer than it should have, to be honest, because some things you were doing caught me off guard. You might want to read up on clipPathUnits and how exactly objectBoundingBox behaves - I had to, because the values of your path-data gave me quite some wonky result, so I had to adjust the path-data for the tweens. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clipPathUnits Also note, that I quickly just threw pointer-events: none on both, the SVG and the clipped container, so they don't block what's underneath them (as they sit on top of everything). So you might want to add some proper handling of visibility/opacity/autoAlpha instead, when beginning and ending the transitions. https://stackblitz.com/edit/web-platform-e34kjf It is the same as I mentioned for the CSS - unless you were going to somehow dynamically load the file neccessary for every page only, it wouldn't work. Barba does not update anything outside of the data-barba="container" except for the page's title. Have you taken a look at the that tutorial I linked to in those other threads you probably have visited? It does mention that in several occasions, e.g. in the part about Page Reloading And Common Parts. But maybe I just misunderstand what you mean by "two JS files for each of the pages" https://waelyasmina.com/barba-js-v2-tutorial-for-total-beginners/ I hope that will help get you where want. Happy transitioning and good luck with the project!
  14. Hey so I've done my best to strip down further (figured you meant removing all animation code from main.js), added the missing reference to swipeup, added the reference to the subpage.css on index.html and also the missing css for the loader SVG. https://stackblitz.com/edit/web-platform-7jbj9m?file=js/main.js It did occur to me that it'd be better to have two JS files for each of the pages - I struggled to find any info or examples of how to make that work with barba to be honest. Totally understand in terms of getting my head more into barba - I've watched lots of videos and read through the docs in detail, but found it a stretch to apply the hooks/required kills and refreshes with my particular set of demands - an svg transition between pages with ScrollTriggers and Loco Scroll.
  15. Sorry Matt, but that stackblitz is not really reduced. It still has ALL the code in it and as mentioned that is too much. If you need help with the transition, please reduce your code to that. ☝️That is also still the case - there still is no element with that class to be found in your HTML. So maybe it's an easy fix if you to just target the right element. One thing you will definitely need to keep in mind for barba is that you can not only just load the css that is neccessary for the one page your are currently on in the <head>. Barba will not update the <head> when transitioning so it won't load a new stylesheet. You will need to have all the CSS that you need site-wide (so for all the other pages too) ready on every other page - unless you implement a way that loads the neccessary styles only dynamically somehow. Your app.css breaks off at some point, btw, with a closing bracket (and maybe even some more styling after that) missing. Also on the two different pages you are loading two very different sets of js files - that is also something you might want to change. There is a lot of things that will be interconnected with barba somehow, so you will really need to be careful with everything, even more than on regular websites that do not work as an SPA. Copy-Pasting things together will only get you so far, trust me, I've been there. In the end you will need to try and get a deeper understanding of how barba works - there just isn't a way around that. There are just too many bumps along the road that will hit you off track if you don't.
  16. Hi @akapowl - hahaha it is indeed a greatest hits compilation of your work on here. Hope you take it as a massive compliment - every time I searched for the effect I was after, your answer appeared! 'Talent borrows, genius steals' so the saying goes, except I have neither trait - certainly not where coding is concerned! Not at this pretty early stage any way 😉 Steadily hoovering up on JS learning as I go. Incredibly kind of you to offer your help! Unfortunately I've run into some trouble porting a stripped down version to Stackblitz - not very familiar with the platform - can't seem to get it to load as a page (blank page in Chrome, Safari gets stuck 'connecting to dev server' but does seem to half-work in the edit preview! Here's the link all the same... https://stackblitz.com/edit/web-platform-7jbj9m?file=js/main.js (The same code appears correctly back in Codepen, with Loco Scroll functioning, but I do appreciate you can't fork this...https://codepen.io/matt-rudd/project/editor/ZKoPzr#) Just for context, what I'm aiming at on the finished site is barba links to four subpages from the horizontal section (only one of these subpage added for simplicity sake!) Here's the transition animation I built: https://codepen.io/matt-rudd/pen/xxpepJd Looking to incorporate this SVG animation as the barba transition, but as you can see the way I've poorly added it to my project just results in a lovely white block at the top of the screen 😅 What would be amazing is to get to a stage where I can add back in my other GSAP animations to the 'setupScrollTriggeranims' function in barba.after hook, and it all 'just works' 😬
  17. Ha, that looks a bit like a best off of my forum answers 😋 ...just kidding; good job getting it all together ! 💪 But it still is a whole lot (too much) to parse through. I even had to look around for the link that is supposed to bring you to the other page for quite a while to begin with. I am pretty sure it is a barba-logic related issue you are having, and as you might already have read in one of the other posts, the GSAP forums would not exactly be the right place to ask about that - as they are supposed to help with directly GSAP related questions. I could offer to have another look, but: If you are having problems with just the transition, it would be great if you could a) reduce everything to that sole problem, so it becomes a lot easier to concentrate on that - everything else doesn't seem needed if all that doesn't work for you is the transition itself. and b) port things over to stackblitz, where I can easily fork and tinker with things - as the number projects one can have on codepen is very limited. One thing I can tell you right away with regard to your ScrollTriggers is that you will definitely have to call ScrollTrigger.sort() after you have set all your ScrollTriggers up [or alternatively set refreshPriorities], because you are not creating them in order of appearance on the page, but are creating (some of) them in loops and your fake-horizontal section for instance doesn't work as supposed to because of that. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.sort() Edit: And after another look I realized that your loaderIn() and loaderAway() functions are faulty. For one, you are targetting an element, that is supposed to have the class swipeup, but you don't have such an element anywhere - neither on the index.html nor the subpage.html The other thing is, that you can not sequence tweens like that. You will probably want to set up a timeline and return that timeline from that function. // bad function loaderIn() { // GSAP tween to stretch the loading screen across the whole screen return gsap.set(swipeup, { autoAlpha: 1, attr: {d: "M 0 100 V 100 Q 50 100 100 100 V 100 z"} //bottom line }, { duration: .8, ease: "power4.in", attr: {d: "M 0 100 V 50 Q 50 0 100 50 V 100 z"} //arc top }, { duration: .5, ease: "power2", attr: {d: "M 0 100 V 0 Q 50 0 100 0 V 100 z"} //full square } ); } Bad... https://codepen.io/akapowl/pen/vYpwopZ ... vs. better. https://codepen.io/akapowl/pen/mdpYNXq
  18. hi, my plan is to play barba.js page layers transition first - and - then animation for a svg logo. but both are start at a time, have tried delay options, but it's not working. or another option i am trying too.. first logo animation plays - and - then the page layer transition.
  19. 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
  20. Thank you so much or this. The CleanGSAP helped me get BarbaJS and Scroll trigger working! function galleryScroller(){ ScrollSmoother.create({ smooth: 1, effects: true }); const galleryWrapper = document.querySelector('.gallery-wrapper') const gallery = document.querySelector('.gallery') const tl = gsap.timeline() tl.to(gallery, { x: `-${gallery.offsetWidth}`, scrollTrigger: { trigger: galleryWrapper, start: 'top top', end: `+=${gallery.offsetWidth}`, pin: true, scrub: 0.5, } }) } const cleanGSAP = () => { ScrollTrigger.getAll().forEach(t => t.kill(false)); ScrollTrigger.refresh(); window.dispatchEvent(new Event("resize")); }; barba.init({ transitions: [ { name: 'index', once() { //siteFirstLoad(); galleryScroller(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async afterEnter() { galleryScroller(); }, to: { namespace: [ 'index' ] }, }, { name: 'default', once() { siteFirstLoad(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async beforeEnter() { cleanGSAP(); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, } ] })
  21. It's the same as for the fake-horizontal-tween.. ...that's why I mentioned that it might be best to wrap everything that you need to re-create in a function and to simply call that function in a hook. Barba will remove the old page-content in between page-changes, so the elements you once told GSAP to tween on will simply just not be there anymore when you come back, but will be replaced with new elements instead. Thus you will have to re-create your tweens for those new elements. Maybe this tutorial (and the comments/questions below that tutorial) can help get a clearer picture of how barba works: https://waelyasmina.com/barba-js-v2-tutorial-for-total-beginners/
  22. limbo

    Barba.js + Smoother

    Resovled. I use a "parachute" load.js file to get some UI stuff in there early dom ready (don't judge me). It included GSAP core which causing a load conflict somwhere — but also not really needed. So have moved into main app.js and it's loading fine alongside barba Turns out I was loading an older version of ScrollTrigger. Obvious now.
  23. Welcome to the GSAP forums @gn90 Sure, wrapping all you need to re-setup in a function and call that function in a barba hook / view on / after enter, sort of like in the stackblitz example linked below, should actually work. Additionaly you will have to make sure though, to kill any old ScrollTriggers when/after leaving a page and probably also remove any eventListeners, too. The latter you will also have to add again alongside your STs then, when entering a new page. https://stackblitz.com/edit/web-platform-j6l93d?file=js%2Fmain.js For animations to be triggered in fake-horizontal-scrolling scenarios as such, you will want to have a look at the containerAnimation property (and for tying it to the scroll an additional look at scrub). This piece on containerAnimation is from the docs: containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a demo here and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. I hope that'll help a bit. Happy tweening
  24. Hi ! I'm actually struggling - killing and resetting ScrollTrigger. Let me explain. I'm currently developping a website using ScrollTriger AND locomitive-scroll. I succeed making both working perfectly together, thanks to your example. But the thing is that my website is in ajax (Barba js), the first time i go to my page, every thing is alright but when I change and i come back, there is an error on the ScrollTrigger.refresh(). I tried : ScrollTrigger.kill(); ScrollTrigger.removeEventListener('refresh', () => locoScroll.update()); ScrollTrigger.removeEventListener('refreshInit'); Do you have any idea what am I doing wrong ? Thank you very much for your work !
  25. If you can set up a minimal demo an there is anything directly related to GSAP we can help you with, we'll be glad to try and do so. For things to work with barba, you will have to either create a project on codepen (regular pens won't work with barba) or use another platform like codesandbox or stackblitz. This here is a rather minimal demo that I recently made on stackblitz for another thread. Maybe you can fork and edit that one. https://stackblitz.com/edit/web-platform-j6l93d