Search the Community

I've managed to fix this by moving the reinitialization of things to Barba's afterEnter hook.

Hello, I decided to try add Barba JS into my project and got most things working as normal. On first load, everything is fine, but if I navigate from home to somewhere else, and back again, once I scroll to a pinned section, things get a little funky. The pinned section seems to pin okay, but on scroll it moves vertically and horizontally - I've left markers on for now. I can't create a simple CodePen as can't use Barba in it, but if you go here, https://ilimitado.studio/, then go to any other page and back to home again, when you scroll down and hit the horizontally pinned section, you'll see the weirdness first-hand. I've tried "anticipatePin: 1" and "invalidateOnRefresh: true" but no joy. In case it matters, I'm using GSAP 3.11.1 and am killing my ScrollTriggers (or so I think) using "ScrollTrigger.getAll().forEach(t => t.kill());" before reinitialising them - also tried "ScrollTrigger.killAll();" as seen it was added in the 3.11 release but still no luck. In Barbas once (on first page load) and beforeEnter (before the new view loads) I'm calling my custom JS in the exact same order/way - hence why I can't figure out what the difference is or why one jumps and one doesn't. P.S. I know you can't debug a project this size, but thought I'd post in case it's something daft I've done/missed. Thanks, Matthew

Hello Guys, it's my first Forum Article. I'm using GSAP for nearly a year now. I'm using GSAP + GsapSmoothScroll + ScrollTrigger and Barba.js I have some slightly complex Animations on my Site and its extremely laggy on iPhone Safari I tried a lot of Solutions that I found hear, but nothing really works. Does someone have some Ideas how to fix. Here is a Link to the Website: This is my config for the ScrollSmoother. The Lag is specially on the page uid42 thats the link i put in hear. The other pages are ok not perfekt but ok: I hope its enough information. scroll = ScrollSmoother.create({ smooth: 0.2, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements ignoreMobileResize: isMobile() && !document.querySelector("#uid1") ? true : false, normalizeScroll: isMobile() && !document.querySelector("body:not(#uid42)") ? true : false, }) On a Mission (hantha.net) Hope someone could help me.

Hi, As I mentioned I don't know anything about Barba and it seems to me that this is more related to when your code is executed and not what is executed. The fact that you have reported that your animations work in some situations is a clear indication of that. The main issue is that the elements are not in the DOM when the code runs, since you're not getting the console logs you're expecting. Once again, Barba is not a GSAP product and we can't offer full support for these type of situations since is not a GSAP related issue. In another thread I linked a collection of videos by @Ihatetomatoes where Peter shows how to use GSAP with Barba. Maybe you should use some time to watch them and perhaps catch what could be not working in your case. The only advice I could offer you now is to run your code in the enter hook, or perhaps try different combinations and check the Barba API for that. The point is when the transition animation starts and once the content of the previous page is not visible anymore, you should kill all your GSAP instances, that is what GSAP Context can do for you super easy, that's why I suggested it. Then once the new page is in place and the DOM structure is what you're expecting to be on that page, run all your GSAP code and put it in a GSAP Context instance for easy cleanup when you go to another route. This approach should work when you refresh as well. At this point I strongly suggest you to ditch GSAP entirely, yep that's right, forget about animations, ScrollTrigger and all that stuff and focus on when you have the DOM you expect to have so GSAP can do it's work. When you have that, then plug GSAP back in and finally when your GSAP animations are working as expected add ScrollTrigger in order to get your animations to be controlled by the scroll position. Good luck with your project! Happy Tweening!

Hey Rodrigo, I've changed it to 'work-page' however once I do my transition to the work-page it doesn't work. It's not even being called once I transition in so I don't see WORK ANIMATIONS PLAYED!!! on my console. But, I see it being fired up once I refresh my page but the animations are broken. function initWorkAnimations() { if (document.body.id === 'work-page') { console.log("WORK ANIMATIONS PLAYED!!!"); const container = document.querySelector('.scrollx'); const sections = gsap.utils.toArray('.scrollx section'); // const texts = gsap.utils.toArray('anim'); const mask = document.querySelector('.mask'); . . . } Mind you that I'm firing up all my scripts in this function: // Main Scripts function initScripts() { initNavAnimations(); initMagneticButtons(); initButtonsAnimations(); initHomeAnimations(); initWorkAnimations(); } And is being used in the barba hooks barba.init({ sync: true, timeout: 7000, debug: true, // !IMPORTANT views: [{ namespace: 'work-page', beforeEnter() { // THIS VIEW MIGHT BE USELESS console.log('WORRRRRRK PAFGE ENTER'); }, }], transitions: [{ name: 'default', async once(data) { // Once page loads initSmoothScroll(data.next.container); initScripts(); // FIRE ALL SCRIPTS ONCE PAGE LOADS }, async leave(data) { pageTransitionIn(data, this) await delay(1200) data.current.container.remove(); }, async enter(data) { pageTransitionOut(data, this); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach((x) => x.kill()); console.log('destroying everything'); locoScroll.destroy(); // Optional! initSmoothScroll(data.next.container); initScripts(); // FIRE ALL BEFORE ENTERING THE NEW TRANSITIONED PAGE ScrollTrigger.refresh(); // IMPORTANT! } }, { // Optional name: 'to-home', from: { }, to: { namespace: ['first-page'] }, once(data) { // do something once on the initial page load initSmoothScroll(data.next.container); initScripts(); }, }] })

Hi, I have zero experience with Barba so I'm not sure at how I should be looking in your example, which has some errors because you have some relative paths to some image files. Try replacing those with some unsplash links or something like that. Basically what could be the problem here is that you refresh your work page and when the code runs something definitely is not working as expected. You should have markers in your development environment in order to see what happens there, also use the console and debugger in order to see what's happening. The hooks from Barba are running when the page is refreshed? Are you 100% sure that this condition meets when you refresh the page? if (document.body.id === 'first-page') { } Your work.html has this: <body id="work-page" data-barba="wrapper"> Finally you have this in your initWorkAnimations method: const texts = gsap.utils.toArray('anim'); That selector is not pointing towards any class, ID or any other attribute of an HTML tag. You do have some elements with an anim class in your page so you should add the dot to that. Hopefully this helps. Happy Tweening!

Hi, Thank you for responding I'm trying to upload everything to codesanbox but is acting weird. It doesen't read my images and gsap is not being defined. Please see: https://codesandbox.io/s/compassionate-wescoff-92sm2w?file=/app.js Also, I've already tried using gsap.context() since it was suggested to revert the animations once I transition and I call the ctx.revert() in my barba transitions but nothing worked. I put all my animations inside the context such as my home animations. Maybe I'm calling the functions wrong? So something like this: // NOTE: data.next = current container barba.init({ sync: true, timeout: 7000, debug: true, // !IMPORTANT views: [{ namespace: 'work-page', afterEnter() { initWorkAnimations(); ScrollTrigger.refresh(); console.log('WORRRRRRK PAFGE ENTER'); }, }], transitions: [{ name: 'default', async once(data) { // Once page loads initSmoothScroll(data.next.container); initScripts(); }, async leave(data) { pageTransitionIn(data, this) await delay(1200) data.current.container.remove(); }, async enter(data) { pageTransitionOut(data, this); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach((x) => x.kill()); ctx.revert(); // ----> REVERT or KILL????? console.log('destroying everything'); locoScroll.destroy(); // Optional! initSmoothScroll(data.next.container); initScripts(); ScrollTrigger.refresh(); // IMPORTANT! } }, { // Optional name: 'to-home', from: { }, to: { namespace: ['first-page'] }, once(data) { // do something once on the initial page load initSmoothScroll(data.next.container); initScripts(); }, }] }) let ctx; function initHomeAnimations() { if (document.body.id === 'first-page') { ctx = gsap.context(() => { //Page 2 const tlH = gsap.timeline({ scrollTrigger: { trigger: '.background', // markers: { startColor: 'blue', endColor: 'blue' }, scrub: true, start: '-40%', end: '40%', }, }); tlH.fromTo(...) .... }

Hi there - this thread has a lot of advice on Barba, take a look and pop back if it's not helpful.

When I enter the main page (index.html) and navigate to the work page everything works as expected. But once I refresh the page in the workpage and not the initial page everything stops working -- what could be the reason for this? I've tried refreshing animations in the barbajs code and it seems that it doesn't work even with the usage of Barba views to reinitialize the animations explicitly. // Main Scripts function initScripts() { initNavAnimations(); initMagneticButtons(); initButtonsAnimations(); initHomeAnimations(); //initWorkPageAnimations() --> it used to be here but I'm now calling it specifically on the barba view to see if something works. } // NOTE: data.next = current container barba.init({ sync: true, timeout: 7000, debug: true, // !IMPORTANT views: [{ // THIS IS WHERE I'M CALLING MANUALLY BUT NOTHING STILL WORKS namespace: 'work-page', afterEnter() { initWorkAnimations(); ScrollTrigger.refresh(); console.log('WORRRRRRK PAFGE ENTER'); }, }], transitions: [{ name: 'default', async once(data) { // Once page loads initSmoothScroll(data.next.container); initScripts(); }, async leave(data) { pageTransitionIn(data, this) await delay(1200) data.current.container.remove(); }, async enter(data) { pageTransitionOut(data, this); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach((x) => x.kill()); console.log('destroying everything'); locoScroll.destroy(); // Optional! initSmoothScroll(data.next.container); initScripts(); ScrollTrigger.refresh(); // IMPORTANT! } }, { // Optional name: 'to-home', from: { }, to: { namespace: ['first-page'] }, once(data) { // do something once on the initial page load initSmoothScroll(data.next.container); initScripts(); }, }] }) The entire code can be found here you may fork my project and use liveserver: https://github.com/officialgio/officialgio.github.io

Hi Giovanny, Is really hard for us to debug a live site plus I have zero experience with Barba. The errors/warnings are pretty clear in terms that they're telling you that those elements are not present in the DOM when those GSAP/ScrollTrigger instances are created. @Ihatetomatoes made a series of videos for using Barba with GSAP: On top of that you can use GSAP Context in your setup. While it was created thinking more in React and frameworks of that style I see no reason why it shouldn't be of any help in your case: https://greensock.com/docs/v3/GSAP/gsap.context() If Barba has some kind of callback when the transition of the previous page is completed, that is the page you're leaving, you can call the revert method in order to kill and revert all your GSAP/ScrollTrigger instances. The only requirement is that all your GSAP/ScrollTrigger instances must be created inside the context instance. Sorry I can't be of more assistance. Good luck with your project. Happy Tweening!

I'm trying to fix many errors that I get in the console by gsap on the workpage.html. My logic is to have if statements that will fire up the gsap animations respectively if they're on the correct page For example: function initHomeAnimations() { if (document.body.id === 'first-page') { //Page 2 const tlH = gsap.timeline({ scrollTrigger: { trigger: '.background', // markers: { startColor: 'blue', endColor: 'blue' }, scrub: true, start: '-40%', end: '40%', }, }); tlH.fromTo('.highlight', { color: 'rgba(255, 255, 255, 0.4)' }, { color: 'rgba(255, 255, 255, 1)', stagger: 1 }); ..... } at first it works once I enter the first page but once I hit the workpage.html it continues to run which I don't want because it gives me a bunch of errors like gsap couldn't find the element which for some reason is running still. Also, I have the following condition: But it doesn't work. I want this to only fire up when it is on the work page. However, if I change the condition to first-page or don't include the condition at all it works as expected which is weird. Another issue is if I refresh on the workpage.html everything breaks. function initWorkAnimations() { if (document.body.id === 'work-page') { const container = document.querySelector('.scrollx'); const sections = gsap.utils.toArray('.scrollx section'); const texts = gsap.utils.toArray('anim'); const mask = document.querySelector('.mask'); // Preference const nav = document.querySelector('.nav'); nav.classList.add('absolute-nav'); // Animations ..... } } For some reason I'm trying to screenshots to this forum but it doesn't allow me since it exceeds kb. So here is the code sandbox repo, try running it on visual studio using live server or fork it One solution I'm going to give a try is to use Barba views and fire up the respective function to their corresponding namespace. Link: https://codesandbox.io/p/github/officialgio/officialgio.github.io/draft/boring-khayyam?workspaceId=ee1f26f5-6074-4dc6-8c22-f5fbab809816&file=%2Fapp.js&selection=[{"endColumn"%3A1%2C"endLineNumber"%3A254%2C"startColumn"%3A1%2C"startLineNumber"%3A254}] Repo: https://github.com/officialgio/officialgio.github.io

Hello, Ignore the errors. The errors are due to not providing the rest of the HTML code which has nothing to do with the issue I've encountered. With or without the HTML the nav bar is flickering or more specifically I think the rounded-div is the issue since that is the last left-most element in the fixed-nav. Before I did any Barba transitions the flickering will still be there so It's not related to Barba or missing HTML elements errors. Please take a look at the same code pen, I've provided the first full-page html doc without the second page which codepen isn't allowing me but it shouldn't matter for this issue. NOTE: I have the full code and I have already fixed any necessary errors before posting this issue.

Hi, There are a lot of errors and warnings on your codepen: In line 11 word is undefined: word.classList.add('loading--active'); Also it seems that you also have barba for transitions there as well. I'd suggest you to fix those errors first and then see what could be the issue. Maybe is related to one of those warnings as well. Happy Tweening!

Your video doesn't seem to match the CodePen you provided. Is it the email button that you're talking about? Have you tried removing 3rd party tools like LocomotiveScroll and barba from the equation? And also update to the latest GSAP version (you're using 3.8.0 but we're at 3.11.5 right now). Sounds like maybe a browser rendering bug (unrelated to GSAP). Safari on iOS is the most buggy browser I've ever seen by far.

that's what i have import gsap from 'gsap'; 'part of animation js', import CustomEase from "gsap/CustomEase"; gsap.registerPlugin(CustomEase); const animOnes = (container) => { const rightLinks = container.querySelectorAll('.nav-anim') const scroll = container.querySelector('.scroll') const h1 = container.querySelector('.section-link h1') 'part of index.js' import '/src/css/style.scss' import smoothscroll from 'smoothscroll-polyfill'; import barba from '@barba/core'; import barbaPrefetch from '@barba/prefetch'; import gsap from 'gsap'; gsap.registerPlugin(CustomEase); import CustomEase from "gsap/CustomEase"; I started this project again still a lot of mess ,it shows me in console ap-core.js:164 GSAP target [object NodeList] not found. not found coz it physically doesn't exist is in some html files , so why is it looking for something non existent. In this case 'nav'. it only is in index.htlm 'about' , 'contact' html's don't have it . it's like a scrolling nav to sections. that's links to it if you like to see it https://6428a954b233897905779d10--blissful-easley-bd2cc4.netlify.app/index.html. One very important thing, I'm not pro. Thanks for answering

Hi, @Ihatetomatoes made this great series of videos about using Barba with GSAP, might be worth taking a look at them: Hopefully this helps. Happy Tweening!

I think maybe you're conflating two separate ideologies, but that is understandable. GSAP, at its core, is made to tween element property values (e.g. x, y, opacity, rotation, scale, etc.) between numerical values, and to manage sequences of tweens. That's sounds simple, but it's powerful! In essence, it can bring a web page to life; any/all of its elements at defined and calculated times, and at defined and calculated locations ... based on user interaction or all on its own. You can use GSAP (to tween out current page elements) in combination with your own custom JS to load remote page content, swap it in to the current page, change the browser's URL, and then again use GSAP to tween in the new elements. Or an logical sequence of tween current out, remote load, tween new in; e.g. load remote content into a local container and do simultaneous tween out/in. Barba.js is made to handle the transition states from one page to the other without a page reload in combination with an animation library ... for which I would highly recommend GSAP! From the Barba.js Docs Animation The important part for a good transition is animation. As Barba is not an animation library, you will need to import one in order to animate elements on the interface to create your transition. Have a look at the Barba.js docs, I think it's exactly what you're looking for. Shaun

Thanks. If it's okay to ask here - I don't know what it is I'm looking for? I really like GSAP, as the timeline approach really makes sense. But I sadly do end up with massive single HTML files. So, does barba.js work really well with GSAP, or - as I suspect? - are they two libraries that have nothing to do with each other? ie - I can't call or invoke or whatever a barba.js interpage animation from within a GSAP timeline? Basically - you're the guru, I'm just trying to figure out the best way to present small business client websites with engaging animation to keep the visitor "hooked" - relating the "small business" bit because they don't tend to have massive amounts of content. The problem with using only GSAP is that I end up with only one giant HTML page - whereas apparently with whatever barba.js is, I can have the multiple pages so that obnoxious Google and it's SEO can fill up the search engine with the separate about page, and the contact page - because that's what Google likes to do. And Google runs the Internet, so we must do whatever Google requires of us to the very best of our ability. From glancing at barba.js, it looks like it's doing what I've requested - animating between different HTML pages. So that's awesome. So what would you suggest? I'm currently obviously throwing a tantrum inside my head right now about how much I hate Google - but I'm making Google cry, so I'll stop that now? Are you relating that I likely need to learn barba.js to better achieve the goal I'm putting forward here? I wouldn't likely know that until I'd spent quite a bit of time experiementing with it - as, being a guru, you'd likely know off hand? On one hand, small business client that Google only indexes by a single HTML page. On the other hand, small business client that Google references with 5 or 6 pages. Based on Google indexing gazillions of pages - the difference between the 1 and the 6 shouldn't statistically matter? But, because it's only one, Google possibly decides to just ignore the site altogether? I have no idea? But I do know that Google refuses to index the site with the single index.html I referenced above.

I think what you’re looking for is https://barba.js.org

Hi @Giovanny7 and welcome to the GreenSock forums! Unfortunately I have literally no experience with Locomotive and Barba so I can't really help you with this. Also both are not GSAP products/plugins so we don't have the bandwidth to give proper support for these tools. The one thing I see is that your codepen example is throwing this error when I try to scroll with the mouse wheel: Uncaught TypeError: Cannot read properties of undefined (reading 'length') Maybe create all your GSAP instances in the Barba callback as well, I mean wait for everything barba related to be completed to then create your GSAP and Locomotive code. There are more than a few examples of using ScrollTrigger with Locomotive so my main suspect is Barba and when exactly your code is running. Sorry I can't be of more assistance. Happy Tweening!

Hey guys! I have a project I'm building which integrates Barba.js, Scroll Smoother and Scroll Trigger. I require the website to scroll infinitely, which is something I've built previously using this example: This works well however It seems when enabling Scroll Smoother problems emerge and it's fairly buggy. Looks like the pageScrollTrigger.scroll(1); is no longer instant (you can visibily see the scroll back to top) and it seems to trigger the scroll back to top earlier than it should. I understand https://lenis.studiofreight.com/ has an infinite option built in, but I want to stick with the GSAP solution. It's probable I need to rethink the implementation in a way that is compatible with ScrollSmoother.js - any help will be appreciated! https://codepen.io/dolph4321/pen/KKxJbwg?editors=1111

Hi there, I'm re discovering GSAP after 6 years, I'm trying to make an animation on a little website project, it's working great except that my page can be seen before the animation, I can't figure out why ? Any idea or help about it please ? Working with reactjs and vite js Here is my code: import { useRef, useEffect } from "react" import { Link } from "react-router-dom" import Champions from "../components/Champions" import { gsap, Power3, Power4 } from "gsap" import "../css/_frame.css" import "../css/_cards.css" const Home = props => { let screen = useRef(null); let body = useRef(null); useEffect(() => { var tl = new gsap.timeline(); tl.to(screen, { duration: 1.2, width: "100%", left: "0%", ease: Power3.easeInOut, }); tl.to(screen, { duration: 1, left: "100%", ease: Power3.easeInOut, }); tl.set(screen, { left: "-100%" }); gsap.to(body, {duration: 0.3}, { css: { opacity: "1", pointerEvents: "auto", ease: Power4.easeInOut } }).delay(0); return () => { gsap.to(body, {duration: 1}, { css: { opacity: "0", pointerEvents: 'none' } }); } }); return ( <> <div className="load-container"> <div className="load-screen" ref={(el) => (screen = el)}></div> </div> <div data-barba="container" className="home"> <div ref={(el) => (body = el)} className="Headd"> {Object.entries(props.originData).map((origin, key) => { return ( <div className="champions" key={key}> {Object.values(origin).map((champions) => { return Object.values(champions).map((champion, key) => { return ( champion.name && ( <Link to={"/" + origin[0] + "/" + champion.name} key={key}> <Champions champion={champion} /> </Link> ) ) }) })} </div> ) })} </div> </div> </> ) } export default Home What I get in the video. Many thanks to anyone who have read me gsap_issue.mp4

Hello, A few months ago we've built a website with GSAP. The strange thing is, it just stopped working correctly. Animations will load when you resize the browser, ScrollSmoother stopped working whatever you do. When I view my project locally, everything works.. You can view the production version here; http://bitly.ws/BPNt animation.js // GSAP import {gsap} from 'gsap'; import {ScrollTrigger} from 'gsap/ScrollTrigger'; import {ScrollSmoother} from 'gsap/ScrollSmoother'; import {SplitText} from 'gsap/SplitText'; gsap.registerPlugin(ScrollTrigger, ScrollSmoother, SplitText); // jQuery jQuery(function() { // ScrollSmoother let smoother = ScrollSmoother.create({ smooth: 2, effects: true }); // Split Text if(document.querySelector('.js-split-text')) { var childSplit = new SplitText('.js-split-text', { type: 'lines', linesClass: 'inline-block' }); var parentSplit = new SplitText('.js-split-text', { type: 'lines', linesClass: 'overflow-hidden' }); gsap.set(childSplit.lines, {opacity: 0}); ScrollTrigger.batch(childSplit.lines, { onEnter: batch => { gsap.set(batch, { opacity: 1, yPercent: 100 }); gsap.to(batch, { yPercent: 0, duration: 1.5, ease: 'power4', stagger: 0.3 }); }, start: 'bottom 95%', once: true }); } // Reveal Image if(document.querySelector('.js-reveal-img')) { let revealContainers = document.querySelectorAll('.js-reveal-img'); revealContainers.forEach((container) => { let image = container.querySelector('img'); let tl = gsap.timeline({ scrollTrigger: { trigger: container, once: true } }); tl.set(container, { autoAlpha: 1 }); tl.from(container, 1.5, { xPercent: -100, ease: 'power2.inOut' }); tl.from(image, 1.5, { xPercent: 100, scale: 1.3, delay: -1.5, ease: 'power2.inOut' }); }); } // Items Fade if(document.querySelector('.js-items-fade')) { $('.js-items-fade').each(function (index) { let triggerElement = $(this); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: '0% 100%', end: '100% 0%', } }); tl.from('.js-items-fade .js-item', { y: '2em', opacity: 0, stagger: .2, duration: 1, ease: 'power3.inOut', delay: '.2' }, 0); }); } }); Dependencies; "@alpinejs/collapse": "^3.10.2", "@barba/core": "^2.9.7", "@gsap/shockingly": "^3.10.4", "@roots/bud": "5.8.7", "@roots/bud-postcss": "^5.8.7", "@roots/bud-sass": "^5.8.7", "@roots/bud-tailwindcss": "5.8.7", "@roots/sage": "5.8.7", "@tailwindcss/typography": "^0.5.2", "alpinejs": "^3.10.2", "flickity": "^3.0.0", "gsap": "npm:@gsap/shockingly", "js-cookie": "^3.0.1" Any help would be appreciated! Thanks

Currently working on new site and wanted to add ScrollSmoother, but come accross a bug, which cant resolve. On some pages part of the bottom page is not visible. When the content of the page hits a critical height, the bug appears. On pages with small height is not detectable. When resize the window, the hidden part becomes visible and works fine. Tried to refresh the Scrolltrigger, to start it with delay, to trigger resize event, to remove sliders, to remove barba.js but nothing helped. Cant reproduce the bug in a demo. Anyone have any idea what can cause such bug? Any help is much appreciated!

I do believe you could create the flip animation during the Barba transition, when both new and outgoing elements are available to the dom, to get the effect you're looking for.