Search the Community

FLIP is pretty new for tutorials, only a few months old. Could be some, but I still don't know about them. As for barba.js you can check out ihatetomatoes. He also have some other nice courses on gsap. https://ihatetomatoes.net/get-barba-101/

That's expected behaviour and indeed is related to Barba.js. When you first load a page, everything is there for ScrollTrigger to pick up. Meaning the DOM does have the elements you pass to ScrollTrigger. When you navigate to a page using Barba.js, the DOM changes (the old container is removed and the new is added) and ScrollTrigger (or any other script), can't 'listen' the events of these newly added elements. You have to destroy the previous instance of ScrollTrigger and reinitialise it, passing it the new elements. Barba gives you several hooks to work with (i believe the one you need is beforeEnter) so on that hook, you could use the next object, to find the new elements you want to pass to ScrollTrigger. Something like this: beforeEnter: ({ next }) => { const items = next.container.querySelectorAll('whatever you want') }, You can check the docs, they mention how to work with third party scripts. You need a similar logic with this. Regarding your second question, i believe you don't need ScrollTrigger at all (or either headroom.js). You can use your own function to detect if the user scrolls up or down and then use gsap for the animation of the header. Be sure to hook your function in requestAnimationFrame or gsap.ticker for better performance on scroll.

Hello!! I have a quite heavy question I'm working on my portfolio website using ScrollTrigger / horizontal scrolling. Everything was working absolutely fine until i installed webpack in the project recently. I needed to install it because i also use barba.js for transitions and webpack makes it so easier to handle the scss from page to page when clicking a link to go to another page of the site (no need to code for stylesheet injection in the head tag of the new html page when a link is clicked). And indeed it's working! BUT very oddly, when starting the project, now i do not land at the top of the page but somewhere in the middle and it's impossible to scroll! ScrollTrigger seems to be the issue here, because the barba transitions are working fine... What happens is: when landing on the page, i see a short flash of the raw html starting from the top (cool) and then (when the JS file is loaded) i get to a certain portion of the website, depending on the xPercent i put in my horizontal-scrolling function...(xPercent: -100 gets me at the 1st section, -200 at the second, -300 at the middle of the site etc... and impossible to scroll.) I tried everything and cannot figure out why/how to fix this. Would you have an idea why this is happening? Any help/hint/link would be highly appreciated! i learned a lot from this forum sofar, maybe my case can help someone else in the future ^^ Thank you! ps: my html and js files are very long, i hope i'm not too much of a hassle... ps2: here is a link to a tweet i posted in december where you can see the scrolltrigger/horizontal scrolling working smoothly in the project. (https://twitter.com/Nightcoder2/status/1333666647429816320)

Welcome to the forums, @COG Digital. It's pretty tough for us to troubleshoot without a minimal demo. This kinda sounds like it might a Barba issue, like you're not tapping into its lifecycle events properly so that your GSAP code runs when the corresponding elements exist but I'm not sure at all. Once we see a minimal demo, perhaps we'll have more insight. Did you add a console.log() right where your tweens are supposed to be firing just to make absolutely sure that they're even getting executed?

Hey clickdeproduto, your site looks nice! That's quite a broad statement. The issue with page transitions in WordPress using something like Barba is that Barba assumes that you have all of the HTML of the next page already. So since WordPress doesn't have set .html pages, I can see it being difficult if not impossible to use something like Barba to transition between pages in WordPress. Maybe there's a WordPress plugin that can help with full page transitions similar to Barba? I don't know ?‍♂️ In any case, this is a bit unrelated to GreenSock so I don't know how much help you'll be able to receive on this forum.

Hi @GNSNTG. Welcome to the forums. It looks like you're using 2 other 3rd party libraries (LocomotiveScroll and Barba.js) - those aren't GreenSock products so we can't really support them here but if you're dynamically loading content into the same page (so it's not actually refreshing the page and going to a new URL that runs the code from the start), make sure you .kill() all your old ScrollTriggers/animations first and then create the new ones and call ScrollTrigger.refresh() to force it to re-calculate all the start/end trigger positions once things are fully loaded and rendered to the screen. If you want to kill ALL of the ScrollTriggers, you can do that like ScrollTrigger.getAll().forEach(t => t.kill()); If you still need help, please provide a minimal demo, hopefully with no 3rd party libraries. But if you do use 3rd party libraries, don't include your whole project - just isolate the issue in the most minimal way possible (a few <div> elements, for example). Happy tweening/scrolling!

Hey gang. I've been trying to get a simple page transition working using GSAP 3 and Barba.js V2 for some time now but not having any luck. All the docs and examples out there haven't seemed to help me with the latest versions. I'm not a great developer but it's become my life long goal to one day solve this I've tried 2 methods below (onComplete and .then) but no dice. I'd appreciate any help I can get! Thank you! See the full code on codesandbox.io function leaveAnimation(e) { var done = this.async(); gsap.to(e, 1, { opacity: 0, onComplete: done }); } function enterAnimation(e) { return new Promise(resolve => { gsap.to(e, 2, { opacity: 1 }).then(resolve()); }); } barba.use(barbaPrefetch); barba.init({ debug: true, transitions: [ { name: "one-pager-transition", to: { namespace: ["one-pager"] }, sync: true, leave: data => leaveAnimation(data.current.container), enter: ({ next }) => enterAnimation(next.container) } ] });

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

Ah, that's what you mean. Yes, that's just animating one element that covers the whole page The steps to create that are: Create a morph SVG animation that covers the whole screen. Create a morph SVG animation that uncovers the whole screen. When a link is clicked, prevent the default behavior and run the animation created in step 1 (potentially also start preloading the content from the new page). When that animation has finished, switch out the old page's content with the new page's content. Once the new content has been loaded, run the animation created in step 2. Does that make sense? This thread has more information on animating blobs (including one going to full screen at the very bottom of Mikel's demo): There's a handy library called barba.js that you can pair with GSAP to load the next page's content and help run your animations. In fact, the site you linked to uses barba.js and GSAP on their website (as does the barba.js site)!

You might want to take a look at barba.js https://barba.js.org/ @Ihatetomatoes has a whole bunch of videos about it.

@mdelp Looking good. One thing I can tell you is, that the reason, why you do not need to reinit your scripts in this setup, is beacause the only script that you use (except for the barba setup) is applied to the navigation module, which is outside of the <main data-barba="container"> . This means that it does not get removed and reapplied on every transition, but stays where it is and thus does not need to be re-initiated. You will only need to re-initiate scripts that aim at elements, that are inside of the <main data-barba="container"> and thus get removed and/or replaced.

Unfortunately this doesn't really solve my problems, when I need to play a rather complex timeline at somepoint after a barba-transition. I also found that when I put the timeline as well as the command to play that timeline into the same function like this... function fireThisAfterTransition() { var scrollIndicationAnimation = gsap.timeline({ paused: true, reversed: true, force3D:true }); scrollIndicationAnimation .set('.scroll-indicator-main', { transformOrigin: "50% 0%" }) .to('.scroll-indicator-main', { duration: 1.5, scaleY: 1, ease: "expo.inOut" }) .set('.scroll-indicator-main', { transformOrigin: "50% 100%" }) .to('.scroll-indicator-main', { duration: 1.5, scaleY: 0, ease: "expo.inOut", onComplete:function(){ console.log ('Look, this is being executed...') } }) .set('.scroll-indicator-main', { transformOrigin: "50% 0%" }) ; scrollIndicationAnimation.play(); } ... and call that function after the barba-transition has ended, it works and the timeline will be animated. But this lacks the possibility to really control the timeline when I need to. Is it possible that the way barba works at this point, it is not compliant with the way GSAP's timelines are made up?

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.

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.

Hi, I'm currently working on a website using Gsap ScrollTrigger. What I'm trying to achieve is showing a "previous-next post" button when the user has reached the bottom of the page. Which is working almost ok when the page is not resized. So on the page I have 2 scrollTriggers: 1. A horizontal gallery of images (with a media match) 2. The previous-next button. 1: let slider = document.querySelector('.hor-slide--project'); setTimeout(function(){ ScrollTrigger.matchMedia({ "(min-width: 992px)": function() { gsap.to(slider, { x: () => -(slider.scrollWidth - document.documentElement.clientWidth) + 'px', ease: 'none', scrollTrigger: { trigger: '.hor-slider-container', start: 'top top', //pinReparent: true, invalidateOnRefresh: true, pin: true, // scrub: .25, scrub: 0, // end: () => '+=' + slider.offsetWidth // end: 4000, end: () => slider.scrollWidth, } }); }, }); }, 1); 2: setTimeout(function(){ ScrollTrigger.create({ trigger: '.single-project', start: 'bottom bottom+=50px', //end: 'bottom bottom', invalidateOnRefresh: true, //markers: true, onEnter: self => { gsap.to('.prev-next', 1, {y: '-100%', ease: Expo.easeOut}) }, onLeaveBack: self => { gsap.to('.prev-next', .5, {y: '0', ease: Expo.easeOut}) } }); }, 100); I'm using setTimeout because in addition to gsap scrollTrigger I'm using Barba.js, and I need to delay, but it doesn't seem to be the problem, I removed the setTimeout and the problem still occurs. For the second scrollTrigger, I have used onEnter and onLeaveBack, this might not be the best way but that's the only way I found so far (I might be part of the problem), so 50px before the bottom of the '.single-project' block reach the bottom of the viewport (start: 'bottom bottom+=50px'), show the prev-next, otherwise hide it. The problem is that when I resize the window from mobile (< 992px) to desktop (> 992px), the prev-next button is now showing to early, before I reach the bottom of the page. Step to reproduce the bug: 1. Load the page on desktop, scroll to the bottom, the prev-next is showing (great) 2. Resize the window (< 992px), the first horizontal gallery scroll is "killed", scroll to the bottom, the prev-next is still showing at the right time (amazing) 3. Re-resize the window (> 992px), the first horizontal gallery is "recreated", and now if you scroll around the page, you can see prev-next showing too early, before you reached the end of the page. I tried refresh and also invalidateOnRefresh true or false, without success, it doesn't want to work. I guess I'm doing something wrong, probably the way I try to show the prev-next, using onEnter and onLeaveBack. Must be a more clever way to do that. Thank you.

Welcome to the GreenSock forums! Glad you’re here. It’s a wonderful place to learn and get your questions answered. What topics can I post about here? We love answering questions that are directly related to GreenSock tools. API questions, bug reports, or if you’re wondering why GSAP behaves a certain way - those types of posts are welcome around here. What topics should be avoided? As much as we love solving problems, the following types of questions are beyond the scope of what we generally provide here for free: Logic issues. JavaScript and application logic, CSS setup, and generic troubleshooting that isn’t directly related to GreenSock tools. Third party tools. Frameworks (React, Angular), other JavaScript libraries (LocomotiveScroll, Barba), build tools, etc. We’re happy to help with the GSAP part of things if you strip out as much irrelevant code as possible and provide a minimal demo. “How do I do this cool effect I saw on a trendy website?” Someone here may point you in the right direction but please don't expect a full tutorial on how to create and effect you saw on a slick web site. Where else can I go for help? If your question is primarily about another tool, try looking for a forum or GitHub repository about that tool. If it’s a general programming-related question, try StackOverflow. Want feedback about your working code? We’d be glad to take a peek at GSAP-specific code but for more general topics (like performance or application logic) we’d suggest something like CodeReview. Read first Please read Getting Started with GSAP, common GSAP mistakes (maybe also common ScrollTrigger mistakes), as well as the GSAP docs before asking your question. Often you’ll get your question answered just by doing that! Make a minimal demo This helps provide context and gives us a rough idea of what you’re trying to accomplish. It's WAY better than trying to dig into a live website with lots of other things going on, or looking at a small excerpt of code without much context. Pro tip: It's often easier to create a minimal demo from scratch rather than stripping out irrelevant things from your original project. You will GREATLY increase your chances of getting a prompt answer if you create a minimal demo. After you've posted a demo to our forums, please click the "Fork" button on CodePen before making future changes so that context is not lost for future readers of the forum. Be courteous We try to treat people the way we’d want to be treated around here. Please do the same. Also keep in mind that the people answering your post are doing so for free! Most of our regular contributors gain nothing from helping you except the satisfaction of doing so. Please give them your gratitude and respect. Ask away! We’re eager to help, so make a minimal demo and ask your question! We’ll do our best to answer it promptly. Pay it forward - help someone else The best way to learn is to teach someone. You’d be surprised how much you grow when you try answering some questions here! We are so grateful for the group of volunteers dedicated to helping others in these forums. It’s quite satisfying to come alongside a fellow developer who is struggling and deliver a clever solution to their issue. Become a contributor! You do NOT need to be an expert. Anyone...and we do mean anyone...is welcome here.

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!

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

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

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

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

Probably has to do with you dynamically changing the location. You might need to use cache busting url. https://stackoverflow.com/a/14197329/2760155 Or force it to reload. https://stackoverflow.com/a/14197317/2760155 But I would probably start with calling the animation on load, or maybe using barba to do the route changes. https://barba.js.org/

It's really not working all the way. If you change the duration, it won't complete. It should wait 10 seconds before showing the next page. Locally it will work fine. It's just something with codesandbox's environment. 🤷‍♂️ barba.init({ transitions: [ { name: "opacity-transition", leave(data) { return gsap.to(data.current.container, { opacity: 0.2, duration: 10 }); }, enter(data) { return gsap.from(data.next.container, { opacity: 0.8, duration: 10 }); } } ] });

@adamoc that's a lot of code to digest easily. Maybe if you could provide a reduced case, i could understand better. However, taking a quick look at your code i think your main issue is more in the architecture of the code, than it is about ScrollTrigger. I noticed you are initialising Barba.js inside your homepage.js file. Not sure what your structure is, but provided that homepage.js is only used on homepage, that approach is wrong. You should have something like a main.js file, which will contain all your Barba.js related functions and then use Views for any page specific logic. Take a look at the docs, they have some great details.

Yes, about him. It's just that if codesandbox couldn't work with barba, then the usual opacity wouldn't work, right?