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


  • FAQ


  • Examples
  • Showcase


  • Products
  • Plugins


  • Learning Center
  • Blog


  • ScrollTrigger Demos


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. We are looking for some assistance on an internal site rebrand, with a tight deadline and innovative scroll-triggered animations. Essentially, we would like to work with someone to handle the animation portion of the site which would involve full-screen sections of the site that would animate in when the user scrolls. These animations would be triggered by classes that I can set to sections to indicate whether they are an animated section and then to elements in that section to determine the animation and some parameters. I'm not 100% sure if this is a job for Greensock, or if that would be overkill, but there are some aspects of the animation and transitions we want that are unconventional. We also are looking to have a page-to-page transition which would be a wipe from the content on one page to that of the other. Something like Barba.js may be useful in this regard. I can't post publicly our designs, but please respond here and I can email you the spec docs for the animations, designs, and motion demonstrations. Budget is 2-3k, with flexibility. Deadline is Jan 26, need to start right away.
  2. Hi, this is my first time working with GSAP (and barba.js), and so far its been amazing. I've got some super basic page transitions running, but I'd really appreciate some advice/guidance how to take them to the next step.. I'd really like to be able to recreate something like this websites page transitions, specifically between 'work' and 'contact' https://alitwotimes.com/ It feels like a totally seamless transition, the old content slides out as the new content slides in.. its so nice but I'm pretty lost on how to create anything even remotely similar I believe I can create an easing thats similar here (please correct me if I'm wrong) https://greensock.com/docs/v3/Eases but I'm lost on how to do the rest of the animation, are there any specific docs I should take a look at? I'm kinda confused as to how I can 'learn' or 'improve' my abilities with GSAP.. thanks for looking 😃 below is my current simple & basic page transitions // Function to add and remove the page transition screen function pageTransitionIn() { // GSAP methods can be chained and return directly a promise // but here, a simple tween is enough return gsap // .timeline() // .set(loadingScreen, { transformOrigin: 'bottom left'}) // .to(loadingScreen, { duration: .5, scaleY: 1 }) .to(loadingScreen, { duration: 1, scaleY: 1, transformOrigin: 'bottom left'}) } // Function to add and remove the page transition screen function pageTransitionOut(container) { // GSAP methods can be chained and return directly a promise return gsap .timeline({ delay: 1 }) // More readable to put it here .add('start') // Use a label to sync screen and content animation .to(loadingScreen, { duration: 1, scaleY: 0, skewX: 1, transformOrigin: 'top left', ease: 'slow.out' }, 'start') .call(contentAnimation, [container], 'start') }
  3. Thanks for this. In the end I gave up on Barba. I just couldn't work out how to kill and refresh the scrollTriggers - I could get other js to fire on events but GSAP didn't work for me. I switched over to Swup (https://swup.js.org) - this does what I needed it to do, and I can get scroll trigger to survive the transitions in a predictable way. If you're interested here is the working JS (assuming gsap and swup are already loaded): /*SCROLL TRIGGER*/ gsap.registerPlugin(ScrollTrigger); function boxRoll(){ const boxes = gsap.utils.toArray('.box'); boxes.forEach(box => { gsap.from(box, { scrollTrigger: { trigger: box, toggleActions: "restart pause resume pause", start: "top "+scrubStart+"%", end: "top "+scrubEnd+"%", //markers: true, scrub: 0.5, id: 'boxRoll', }, rotate: 360, x: '50vw', }) }); } function tileFade(){ const tiles = gsap.utils.toArray('.tile'); tiles.forEach(tile => { gsap.from(tile, { scrollTrigger: { id: 'tileFade', trigger: tile, toggleActions: "restart pause resume pause", start: "top 100%", end: "top 75%", scrub: 0.5, //markers: true, //stagger: 1, }, opacity: 0, scale: "random(0.5, 0)", }) }); } /*Swup*/ const swup = new Swup({ //plugins: [new SwupHeadPlugin(), new SwupBodyClassPlugin()] }); swup.on('contentReplaced', function () { window.scrollTo(0, 0); /*GSAP */ boxRoll(); tileFade(); }); /*Seems to work better if these are called after swup*/ boxRoll(); tileFade();
  4. Hey @sixtillnine - welcome to the forums. When you search for barba in these forums, you will actually find quite a few threads asking about this or something similar. In a nutshell: You will 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 below. Hope this helps. Cheers, Paul
  5. ZachSaucier


    Hey blopiblop. I haven't used Swup before but it looks like it does page transitions and has some built in animation support. It looks like you can hook into Swup's events to do your own animations (like GSAP animations) if you want to. So you could do the enter or leave or both animations with GSAP. Or you could use GSAP for all the non-page-transition animations on your page. Or you could use a different tool like Barba which just does the content switching and then hook it up to GSAP for the animation part. Lots of possibilities.
  6. Thanks. I've looked at this. I realize I still wasn't very clear. It appears that barba.js involves ajax and change of actual page urls. All my html is javascript generated on the SAME page. Basically, a function fills a div tag with the page content. When I run the function again, all the content changes. I need to make the div contents 'transition' from the old content to the new content. I have a div: <div id='divContent'></div> I have another div <div id='divTransition'><div> Both are css position:absolute so they can move. I have a <div id='divBackground'></div> which is the 'anchor' and potential image background of the page. The first transition is to be a fade. Basically, the html in divContent fades out, then the html changes and the div fades back in. I feared that the time it takes to fill the content may be noticeable so if needed I could fill divTransition and then do the fade between the 2 divs. I thought this would be easy. So far, I can't do it. The second transition would be the old content slowly moves to the right & off screen while the new content moves right and onto the screen. I haven't tried that one yet.
  7. You might want to take a look at barba.js https://barba.js.org/ @Ihatetomatoes has a whole bunch of videos about it.
  8. Hi Zach, thank you very much for your quick reply. As per your request, I reply to update you on the solution. In the end, with a lot of patience, I followed your advice and tried to find the "catch". Basically the problem was "logical". Instead of calling the init (of all functions with gsap animations) "on start" during the outgoing animation phase, it must be called during the "beforeEnter" phase of Barba.js, after the kill of all timelines destruction of the scroll and re-initialization of the scroll. (order is essential). function pageTransitionOut({container}) { const tl = gsap.timeline({ defaults: { duration: 1, ease: 'power2.inOut' }, // DON'T DO THAT /* onStart: () => { window.scrollTo(0, 0); initScript(); } */ }); tl .to(loader, { yPercent: -100 }) return tl; } // DO THAT barba.init({ sync:true, transitions: [{ name: 'overlay-transition', once(data) { initSmoothScroll(data.next.container); initLoader(); }, async leave(data) { pageTransitionIn(data.current); await delay(1000); data.current.container.remove(); }, async beforeEnter(data) { // FOLLOW THIS ORDER ScrollTrigger.getAll().forEach(tl => tl.kill()); scroll.destroy(); initSmoothScroll(data.next.container); initScript(); // init with all your gsap animations }, async enter(data) { pageTransitionOut(data.next); } }] }); Hope this can help someone.
  9. Thanks for the feedback Zach! I was able to get it working perfectly with GSAP and Barba hooks but ended up using a different approach.
  10. Hi all, I'm looking to build a fairly simple slider but lack the knowledge to do so, hope someone can point me in the right direction. I have a slider that contains 3 images, and when the page loads I want one of those images (random) to show. Then I want to bind an event (will be a Barba page transition, but could be a button too), that fades out the current image that is showing and fades in another random image. Everytime the event is triggered, the current slide has to fade out and a random other one has to fade in. Is this possible with gsap?
  11. Hello everyone, thanks guys for gsap and all about it. I use barba + locomotive + gsap on my project, i try to destroy all ScrollTriggers with ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); But i have some errors from ScrollerProxy, and i think my code doesnt destroy all ScrollTriggers, especially scrollerProxy. There my code for scrollerProxy, almost duplicate from docs if (scrollContainer) { window.locoInstance.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy(scrollContainer, { scrollTop(value) { return arguments.length ? window.locoInstance.scrollTo(value, 0, 0) : window.locoInstance.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: scrollContainer.style.transform ? 'transform' : 'fixed', }) } There error Uncaught TypeError: Cannot read property 'scroll' of null at ScrollTrigger.scrollTop [as scroll] at _updateAll Sorry for my english, sorry it's not codepen, and if it's something stupid, i just tired and don't know why and how to fix this, thanks
  12. Hi Zach, I have not created any codepen but you can check my demo site here. You can go through the pages from menu to check. http://s784828798.websitehome.co.uk/apnewsite/ I have used Barba js + GSAP + VelocityJS for text animation but not working like i want. I would like the same way on Ouiwill website does. Please let me know if any solution.
  13. Unfortunately that example doesn't help much in regards to your transition problem, because it doesn't include barba. You'd probably have to use something like codesandbox or a codepen project to make a working example. When you enter a new page, do you initiate everything again? (Sorry if that question might sound stupid, but maybe you don't and that would explain it not working) Also, I don't know if that actually is or can be source ofproblems, but you are using GSAP v3.3.4 with ScrolTrigger's latest beta. scrollerProxy was only introduced in GSAP 3.4.0. So maybe try updating those files you load to the most recent version and see if it changes anything.
  14. Hey @neo420 It's always kind of hard to give any good advice without an example - especially with the combination of barba and other libraries. My guess is, that you will probably have to kill/destroy both, your ScrollTriggers AND locomotive-scroll when leaving a page, and reinitialize both after your transition. So first off, locomotive-scroll gets knwoledge of the new environment it is supposed to be working in, and then your ScrollTriggers get that same information and can also adjust to locomotive-scroll. A good way to kill all your ScrollTriggers is this let triggers = ScrollTrigger.getAll(); triggers.forEach( trigger => { trigger.kill(); }); Locomotive-scroll has a .destroy method of its own. Give it a try and see if it helps. Cheers, Paul
  15. Hey @Sanady - welcome to the forums. That most likely is related to how things work with barba. Whenever you transition between pages, barba gets rid off the old content and adds in new content. My guess would be that you init your scrollTo function only once on page load. That would result in it only knowing the contents that are in place at that time and none of the contents that will be added in later on. Thus it has nothing to relate to after you transitioned and things result in errors. You'd probably have to wrap your scrollTo-functionality inside a function, and init that function in a barba hook every time you enter a new page (and best, also destroy it in some way for the old content when leaving a page). Hope this helps. Cheers, Paul
  16. Im use barba first time, and i think my scripts failed w/o errors on console, and locomotive doesnt destroy because script failed before destroy, and I get some scrollTrigger errors, and think I need destroy locomotive scroll and scrollerProxy, thank you for help, i'm just confused, but now I found reasons why I get this errors
  17. I'm not sure, how i can use barba on codepen, where shoul redirect links, but i don't ask for debug, main question its how i can fully destroy script for scrollerProxy
  18. Hi, everyone! I am new to gsap. I am trying to get my scrollTrigger animation to work with gsap. Take a look at my demo: https://codepen.io/Ollymolly/project/editor/AOxzmn I have everything working fine except one. As you will see in the code, I am trying to put a scale animation on the headline. I put it all right, but nothing works. And I got the idea that I didn't connect scrollProxy correctly. Any ideas how to fix it? I have a great barba js with smoothScroll. But somehow scrollTrigger.... does not work with them.
  19. This way you would only be creating new instances over and over again, whenever you transition between pages - because you never kill or destroy the old instances - the same goes for the smooth-scrollbar in your initial demo. For killing off old ScrollTriggers you could use a function that contains this let triggers = ScrollTrigger.getAll(); triggers.forEach( trigger => { trigger.kill(); }); preferably in a global hook of barba. A way to destroy the old smooth-scrollbar could be to use Scrollbar.destroy(scrollBar); alongside my example of how to set it up in the first place. I personally use the beforeEnter global-hook to destroy old instances (because in the following enter-hook I remove the current.container of barba) and the afterEnter global hook to initiate new instances barba.hooks.beforeEnter(({ current, next }) => { var beforeEnterPromiseAll = new Promise(function (resolve) { killOldScrollTriggers(); destroySmoothScrollbar(); resolve(); }); return beforeEnterPromiseAll; }); barba.hooks.enter(({ current, next }) => { var enterPromiseAll = new Promise(function (resolve) { current.container.remove(); resolve(); }); return enterPromiseAll; }); barba.hooks.afterEnter(({ current, next }) => { var afterEnterPromiseAll = new Promise(function (resolve) { initSmoothScrollbar(); initScrollTriggers(); resolve(); }); return afterEnterPromiseAll; }); Depending on your set-up and how exactly you want things to work, you'd have to find a way of your own for this. There is no real one-type-fits-all solution. If you search the forum for 'barba' you will find quite a few other recent threads on that topic.
  20. thank you for the answer. But unfortunately in your demo version, there is no barba shell. I thought I did the right thing. I have been reading the barba js forum for a long time and I understand how it works. I saw that I had to delete the scripts and initialize them, that's what I did with smoothScrollbar. In my version I re-run smoothScrollbar when I go from one page to another. And I thought to do it by analogy with scrollTrigger.... maybe I did not initialize it correctly. It's just strange, I couldn't find the code to reinitialize on the official barba.js website in the documentation... I'll look more closely
  21. Hey @OlgaKondr - welcome to the forums. There is a whole lot of things to keep in mind, when combining all of these libraries together. None of what you are experiencing is actually related to GSAP or ScrollTrigger itself - just to the way things need to be set up with smooth-scrollbar or barba. First off, you should iniate your Smooth-Scrollbar, before setting up your ScrollTriggers. Second, I would recommend putting your #viewport for your smooth-scrollbar inside of your data-barba="container" because Third, you will have to re-initialize every script you want to run (flawlessly) on a certain page, after barba has transitioned. Thus, before the transition you will have to kill of your old ScrollTriggers and/or GSAP-Animations, and re-initiate them after the transition for the new page (ideally the same applies for your smooth-scrollbar, too, if you want it to work flawlessly). That is because barba removes everything inside the old container and puts the contents of the new container in the old's place, so ScrollTrigger needs to calculate things for the new page layout. On a further note, it is best to initiate your smooth-scrollbar like this scrollBar = document.getElementById('viewport'); bodyScrollBar = Scrollbar.init(scrollBar, { damping: 0.07 }); See this example of your demo for the use of smooth-scrollbar together with ScrollTrigger https://codepen.io/akapowl/pen/079a512ae9e9030aceb7388d007ee5f2 Before using libraries like these, especially when it is several together, I highly recommend thoroughly inspecting the documentations of those, and trying to understand, how things work. Otherwise you will run into a whle lot of problems further down the road. Hope this helps a bit. Paul
  22. Hey jackew and welcome to the GreenSock forums. Given that site uses GSAP for its animation I'd say it's quite doable with GSAP With that being said there are multiple aspects to that transition: A tool like Barba or Swup to transition between pages. A clip-path animation to hide content inside of the container. Translations on all the content in the viewport to animate it in as well. Creating something like this requires building each piece and combining it all together. There's no one plugin that you can throw in there to do it all for you
  23. thank you so much! yes, i just signed up for your free gsap and barba js course, i am taking it with great pleasure! thank you!
  24. GeorgeErshov


    Hello, everybody. Not so long ago I started studying GSAP and fell in love with its features. I have achieved almost everything I wanted for my project and not long ago I started to study the Barba js bibliography. My question probably concerns GSAP + Barba interaction. If you open the project and scroll through not much to a block with a project called Blue (there are guys on a moto), you can click on the photo and you will be redirected to another page, absolutely the same. Apart from the fact that the first block says: this PROJECT PAGE or this INDEX PAGE First the gsap animation is played, and then there is a transition and at this point all my scripts stop working, you can see that the base scrollbar is back and smooth animation with ScrollTrigger stopped working. I saw an example of barba + gsap + locomotivescroll, but I don't know much about it yet and I'm asking you to look specifically at my example. Help me set up my script correctly so that my animation will play, and then the page will open and all scripts will work correctly. https://codepen.io/GeorgeDesign2020/project/editor/ZLrYEY
  25. Hi @GeS, Zach is right, I have created some Barba.js learning resources that could help you. More specifically here is an example of Barba + Smooth ScrollBar + GSAP and GitHub repo. I would recommend learning Barba.js by watching this YouTube playlist first. Hope that helps.