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. Hello guys, I am developing a sit with different transition and barba js, this error often happens after a page transition, but I can't understand in which part of the code as it doesn't give me any reference to my scripts What could it depend on? ScrollTrigger.js?ver=5.6:605 Uncaught TypeError: Cannot read property 'splice' of undefined at Tween.Se.refresh (ScrollTrigger.js?ver=5.6:605) at _callback (twennmax.js?ver=5.6:10) at _renderZeroDurationTween (twennmax.js?ver=5.6:10) at Tween.render (twennmax.js?ver=5.6:10) at Timeline.render (twennmax.js?ver=5.6:10) at ea (twennmax.js?ver=5.6:10) at updateRoot (twennmax.js?ver=5.6:10) at twennmax.js?ver=5.6:10 at Array.forEach (<anonymous>) at kk (twennmax.js?ver=5.6:10)
  2. First I want to apologize for the amount of code that's in my CodePen, I had to scrap it from my project and make sure I could recreate the issue. In my project I'm using Smooth Scrollbar & Barba.js but I didn't include the Barba code because I was able to recreate the issue without it (plus can you even use barba.js page transitions in codepen?) Anyway the issue I'm having is when you scroll to the end of the page (or to the end of the 2nd pinned section), then resize the window and scroll back up the "portfolio" section is missing. If you inspect element you can see that the "portfolio" section seems like it is still stuck in the pinReparent; which is below all the script tags BUT it doesn't make sense because if you inspect element and watch the two pinReparent's happen; once you get to the end of both sections, the sections leave the pinReparent state but once you resize the window the portfolio section jumps back into the pinReparent state. This issue only happens on a window resize event, so I'm not sure if it's an issue with pinReparent, Smooth Scrollbar or my code. Before I added Smooth Scrollbar to my project I only had the portfolio section and the only way I could get that section to scroll correctly with Smooth Scrollbar was to add the pinReparent. The same goes for when I added the zoom section into the project, it wouldn't work without it. I have tried to add a couple different eventlisteners but that didn't help. Here is the most recent one I tried on my project: let allTriggers = ScrollTrigger.getAll(); ScrollTrigger.addEventListener("refresh", () => bodyScrollBar.update()); ScrollTrigger.refresh(); let progress = 0; ScrollTrigger.addEventListener("refreshInit", () => progress = allTriggers.progress ); ScrollTrigger.addEventListener("refresh", () => allTriggersscroll(progress * ScrollTrigger.maxScroll(window))); bodyScrollBar.addListener(ScrollTrigger.update); I also tried to wrap it in a window.addEventListener and some different variations but no luck. Another weird thing is the word "TEXT" that's in the portfolio section; jumps up once the pin/horizontal scrolling starts. I'm not sure why it does it in the CodePen but is does not do it in my project.
  3. Hi @ZachSaucier, once more many thanks. I really can't put into words how cool GSAP and the forums are. With that in mind I am much more confident to expand my little barba app and integrate a lot more of wonderful GSAP Library. As I said. You really rock.
  4. I am looking for a page transition effect when clicked on a smaller image and then that small image is going to animate and cover the full screen and now will behave as a different page... Refer to this portfolio website :- https://www.chriswilcock.co/ (Just click on any image like: Discovery Land co, Bear Grylls, etc..), a liquid kind of page transition happens, if you look at the url while transitioning, it is actually a different page... Addon:- I think this page is using barba.js for the transitions, but please help me, because I want to create a similar transition, and I am also using locomotive scroll on my website.
  5. Hi I am new to GSAP (not great at JavaScript to begin with) Client wants to mimic the scrolling effect (fade-in/fadeout) of sections/pages on https://meiomi.com/. No eCommerce, etc. I am using Oxygen Builder for layout. I have been struggling with getting GSAP and barba.js to work correctly. I am looking for a mentor to look at what I am doing and show me what I am doing wrong. I have a few hundred dollars I am willing to split off of what I quoted. The site is to go live Feb 12. Thank you, This is as far as I have gotten: https://codepen.io/RNDL/pen/LYRobjx
  6. Hey super.asdf and welcome. Can you please provide a minimal example in Vue of what you're trying to accomplish? That will make it a lot easier for us to help you with the transition Side note: We will eventually be coming out with a tutorial about doing some basic page transitions with Flip. It will be focused on using libraries like Barba to do so, but perhaps it can also include some basic demos of React and Vue as well.
  7. The second step mentioned gets all active ScrollTriggers and kills every single one of them in the global afterLeave-hook of barba - after leaving a page and thus before creating the new ScrollTriggers. Maybe it works for you without that step, but my advice is to add it if you want to prevent possible future conflicts possibly resulting in performance or logical issues.
  8. Thanks @akapowl It's works fine now. I don't understand 2and step. So I just try 1st step and then directly 3rd step before as you mention. Now I got it How and why I need to kill and re-initiate animation after barba trigger.
  9. Sorry for the misunderstanding: What I was referring to was the part of killing off the old ScrollTriggers before/when transitioning and having to create them from scratch when the content of the new page has loaded. Otherwise ScrollTrigger might not have the correct dimensions to work with. "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." Did you try that? Actually It shouldn't make a difference wether or not your footer is also transitioning, because when the content (which is transitioning) above the footer has different dimensions (meaning height) than it had before transitioning, the position of the footer on the page will be different, thus ScrollTrigger will have the wrong data to work with. I forked your project and put together a quick and dirty example of that - but I will have to delete it again. So please take a look at it and let me know if this works for you, so I can go ahead and delete it again. https://codepen.io/akapowl/project/editor/c60c063115038852cb22145bb95bbe1e What I did here was 1) to put the creation of the ScrollTrigger into a function and call it immediately so it is working on page load. function initScrollTriggers() { gsap.set('.footer-container', { yPercent: -50 }) const uncover = gsap.timeline({ paused:true }) uncover.to('.footer-container', { yPercent: 0, ease: 'none' }); ScrollTrigger.create({ trigger: 'main', // markers: true, start: 'bottom bottom', end: '+=95%', animation: uncover, scrub: true, }) // uncover.restart(); console.log('ST Initiated') } initScrollTriggers(); 2) I added a barba.hook for afterLeave in which I kill off all ScrollTriggers barba.hooks.afterLeave((data) => { let triggers = ScrollTrigger.getAll(); triggers.forEach( trigger => { trigger.kill(); }); console.log('ST Killed') }); and 3) In an onComplete-callback of your fading in transition (the after) I call that function that creates the ScrollTrigger again - done here to make sure that all layout-shifting is finished before re-applying the ScrollTrigger. barba.init({ transitions: [{ name: 'default-transition', leave(data) { return gsap.to(data.current.container, { duration: 0.5, y: 200, opacity: 0, }); }, after(data) { return gsap.from(data.next.container, { duration: 0.5, y: 200, opacity: 0, onComplete: function() { initScrollTriggers(); } }); } ... Please don't see this as an absolute solution - as mentioned this is quick and dirty and it is just to show how to kill and create again. Depending on quite some other things, it might be better to e.g. call the function somewhere else. But it seems to work. In the end to get it working properly is a matter of barba- and general-setup that you would have to tinker with to get it working 100% properly. Let me know if this helps. Cheers, Paul
  10. Thank you @akapowl for your time. I tried this but did not succeed. Some of the threads are suggesting to refresh ScrollTrigger like ScrollTrigger.refresh(true); with Barba.js function and some are suggested to add gsap into function and pass it to Barba. but I have gsap on the footer and Barba in the middle content both are not connected each other I'm still looking for a solution.
  11. Hi Avabrooks, Thanks for the info... I usually don't rely on 'plugins' as they do often cause more problems than good. Luckily, I'm fully able to design and code for WP - I've recently updated a bespoke core theme I built using Bootstrap 4 to now include GSAP + Barba. The gallery that prompted this post was an issue specifically at a client's request and I've now built it. Personally, I hate the result and I'm hoping for him to realize how horrible it is and use the alternatives I've shown him using GSAP.
  12. Hi, I'm new to GSAP and have been playing around with it for a few weeks. So far I love the results and have made/modified slideshows etc (from Codepens etc). I managed to integrate GSAP/Barba into WordPress for page transitions and basic animations so far and I'm hoping to stick with GSAP but my client suddenly decided he doesn't like full page slideshows etc I've made and got an idea he wants something very specific that looks/functions like this: http://www.jquerycarouselimagevideo.com/wordpressplugin/whiteResponsivePerspective.html Personally, I hate the example he's given and it look so out of date (to me) but I need to prove my case by creating something similar first - I found a pen and played around with it but so far I cant figure out how to get an overlap (which he wants) and I've found no GSAP examples even close to this... Any ideas where to start? Thanks
  13. Thanks, Zach I tried using barba, the leave animation worked great, but the enter never worked. Again, I read there are issues with Oxygen builder and tried the remedies i found in those forums, but no good.
  14. That question doesn't make much sense. ScrollTrigger is for scroll-based animations. That's it You can create the effect that you see on the Meiomi site using GSAP + ScrollTrigger without issue but GSAP and ScrollTrigger don't have any built-in functionality to dynamically load new content and replace the current content. You can use a different library (like Barba or Highway) for that part. When the new content loads you can then use GSAP and ScrollTrigger to animate things as you want to. Or you could have all of the content on the same page and just use GSAP and ScrollTrigger to animate it. Does that make sense?
  15. Hi there, I've completed a project with GSAP + Barba.js before. Here it is: https://hyphenco.com Here's another project I did that has many scroll-based animations https://www.overlapassociates.com I can do unconventional animations based on your needs. Please email me about the details to balapa95@gmai.com Looking forward to hearing from you, Bhakti
  16. 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.
  17. 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') }
  18. 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();
  19. 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
  20. 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.
  21. 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.
  22. You might want to take a look at barba.js https://barba.js.org/ @Ihatetomatoes has a whole bunch of videos about it.
  23. 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.
  24. 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.
  25. 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?