Search the Community

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

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

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.

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

Hi all I have simply begun my exploration into animation and smooth transitions of webpages. Once discovering this I decided to redesign my own website. I simply would like to get someones opinion on my current working code and see if I am using BarbaJS correctly with everything else. One thing I have been having trouble with is solving when a page is transitioning to the next it breaks the animation. Any help is appreciated! Thank you so much in advance. document.addEventListener("DOMContentLoaded", function() { $(window).load(function() { initBarba(); //scrollMagic(); }); //end ready }); //end loaded function scrollMagic() { var controller = new ScrollMagic.Controller(); var duration = 0.75; var animations = [ { y: "+=50", scale: 1, opacity: 0 }, { height: 0, opacity: 0 }, { scale: 0.5, opacity: 1, x: 400 } ] $('[animate-fade]').each(function(index) { var tl = new TimelineMax(); tl.from(this, duration, animations[0]); var scene = new ScrollMagic.Scene({ triggerElement: this, triggerHook: 0.6, reverse: false }) .setTween(tl) .addTo(controller); }); // Create scenes for splittext $("[animate-text]").each(function(index) { var splitone = new SplitText(this, { type: "chars,words, lines" }), tl = new TimelineLite({ delay: 1 }); var tl = new TimelineMax(); tl.staggerFrom(splitone.chars, 0.5, { y: 80, opacity: 0, ease: Power4.easeOut }, 0.01); new ScrollMagic.Scene({ triggerElement: this, triggerHook: 0.6, reverse: false }) .setTween(tl) .addTo(controller); }); $("[animate-text-roll]").each(function(index) { var splitone = new SplitText(this, { type: "chars,words, lines" }), tl = new TimelineLite({ delay: 1 }); var tl = new TimelineMax(); tl.staggerFrom(splitone.chars, 0.8, { opacity: 0, scale: 0, y: 80, rotationX: 180, transformOrigin: "0% 50% -50", ease: Back.easeOut }, 0.01, "+=0"); new ScrollMagic.Scene({ triggerElement: this, triggerHook: 0.6, reverse: false }) .setTween(tl) .addTo(controller); }); $("[animate-text-loop]").each(function(index) { var splitone = new SplitText(this, { type: "chars,words, lines" }), tl = new TimelineLite({ delay: .5 }); var tl = new TimelineMax(); tl.staggerFrom(splitone.chars, 3, { delay: .5, y: 80, opacity: 0, ease: Power4.easeOut, repeat: -1 }, 0.01); new ScrollMagic.Scene({ triggerElement: this, triggerHook: 0.6, reverse: false }) .setTween(tl) .addTo(controller); }); $('[animate-line]').each(function(index) { var tl = new TimelineMax(); tl.from(this, duration, animations[1]); var scene = new ScrollMagic.Scene({ triggerElement: this, triggerHook: 0.6, reverse: false }) .setTween(tl) .addTo(controller); }); $('[animate-overlay]').each(function(index) { var tl = new TimelineMax(); tl.fromTo( this, 1, { skewX: 30, scale: 1.5 }, { delay: 1, skewX: 0, xPercent: 100, transformOrigin: "0% 100%", repeatDelay: 1, ease: Power2.easeOut } ); var scene = new ScrollMagic.Scene({ triggerElement: this, triggerHook: 0.6, reverse: false }) .setTween(tl) .addTo(controller); }); } function handleAnimations() { var Homepage = Barba.BaseView.extend({ namespace: 'homepage', onEnter: function() { // The new Container is ready and attached to the DOM. console.log("enter"); $(".portraits-hero").removeClass("d-none"); $(".couples-hero").removeClass("d-none"); $(".weddings-hero").removeClass("d-none"); TweenMax.from(".portraits-hero", .75, { delay: .5, y: "+=50", alpha: 0, ease: Power3.easeInOut }); TweenMax.from(".couples-hero", .75, { delay: .7, y: "+=50", alpha: 0, ease: Power3.easeInOut }); TweenMax.from(".weddings-hero", .75, { delay: 1, y: "+=50", alpha: 0, ease: Power3.easeInOut }); var mySplitText = new SplitText(".portraits-hero p", { type: "chars,words, lines" }), tl = new TimelineLite({ delay: 0.5 }); tl.staggerFrom(mySplitText.chars, 0.5, { y: 100, opacity: 0 }, 0.02); var mySplitText = new SplitText(".couples-hero p", { type: "chars,words, lines" }), t2 = new TimelineLite({ delay: 0.7 }); t2.staggerFrom(mySplitText.chars, 0.5, { y: 100, opacity: 0 }, 0.02); var mySplitText = new SplitText(".weddings-hero p", { type: "chars,words, lines" }), t3 = new TimelineLite({ delay: 1 }); t3.staggerFrom(mySplitText.chars, 0.5, { y: 100, opacity: 0 }, 0.02); scrollMagic(); }, onEnterCompleted: function() { // The Transition has just finished. }, onLeave: function() { // A new Transition toward a new page has just started. console.log("leave"); TweenMax.to("#main-content", .5, { y: "-=40", alpha: 0, overwrite: false, immediateRender: false }); }, onLeaveCompleted: function() { // The Container has just been removed from the DOM. } }); var About = Barba.BaseView.extend({ namespace: 'about', onEnter: function() { // The new Container is ready and attached to the DOM. console.log("enter"); TweenMax.from("#main-content", .5, { delay: .5, y: "+=100", alpha: 0, ease: Power3.easeInOut, overwrite: false, immediateRender: false }); }, onEnterCompleted: function() { // The Transition has just finished. }, onLeave: function() { // A new Transition toward a new page has just started. console.log("leave"); TweenMax.to("#main-content", .5, { y: "-=100", alpha: 0, ease: Power3.easeInOut, overwrite: false, immediateRender: false }); }, onLeaveCompleted: function() { // The Container has just been removed from the DOM. } }); var Portraits = Barba.BaseView.extend({ namespace: 'Portraits', onEnter: function() { // The new Container is ready and attached to the DOM. console.log("enter"); $(".mobile-hero").removeClass("d-none"); $(".mobile-header").removeClass("d-none"); $(".v-line").removeClass("d-none"); $(".body-content").removeClass("d-none"); TweenMax.from("#main-content", .5, { delay: .5, alpha: 0, ease: Power3.easeInOut, overwrite: false, immediateRender: false }); var mySplitText = new SplitText(".mobile-header", { type: "chars,words, lines" }), tl = new TimelineLite({ delay: 0.5 }); tl.staggerFrom(mySplitText.chars, 0.5, { y: 100, opacity: 0 }, 0.02); TweenMax.from(".v-line", 1, { delay: 1, alpha: 0, height: 0, ease: Power3.easeInOut }); scrollMagic(); }, onEnterCompleted: function() { // The Transition has just finished. }, onLeave: function() { // A new Transition toward a new page has just started. console.log("leave"); TweenMax.to("#main-content", 1, { y: "+=30", alpha: 0, ease: Power3.easeInOut, overwrite: false, immediateRender: false }); }, onLeaveCompleted: function() { // The Container has just been removed from the DOM. } }); // Don't forget to init the view! Homepage.init(); About.init(); Portraits.init(); } function initBarba() { var FadeTransition = Barba.BaseTransition.extend({ start: function() { /** * This function is automatically called as soon the Transition starts * this.newContainerLoading is a Promise for the loading of the new container * (Barba.js also comes with an handy Promise polyfill!) */ // As soon the loading is finished and the old page is faded out, let's fade the new page Promise .all([this.newContainerLoading, this.fadeOut()]) .then(this.fadeIn.bind(this)); }, fadeOut: function() { /** * this.oldContainer is the HTMLElement of the old Container */ return $(this.oldContainer).animate({ opacity: 0 }).promise(); }, fadeIn: function() { /** * this.newContainer is the HTMLElement of the new Container * At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden) * Please note, newContainer is available just after newContainerLoading is resolved! */ var _this = this; var $el = $(this.newContainer); $(this.oldContainer).hide(); $el.css({ visibility: 'visible', opacity: 0 }); $el.animate({ opacity: 1 }, 1000, function() { /** * Do not forget to call .done() as soon your transition is finished! * .done() will automatically remove from the DOM the old Container */ _this.done(); }); } }); /** * Next step, you have to tell Barba to use the new Transition */ Barba.Pjax.getTransition = function() { /** * Here you can use your own logic! * For example you can use different Transition based on the current page or link... */ return FadeTransition; }; //handle the barba views handleAnimations(); //disable cache so that animations always Barba.Pjax.cacheEnabled = false; //Please note, the DOM should be ready Barba.Pjax.start(); }

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 what you’re looking for is https://barba.js.org

Hmm, it's really hard to inspect the code from devtools and troubleshoot. There's a nice working example of barba & gsap here: https://stackblitz.com/edit/web-platform-j6l93d?file=js%2Fmain.js If you could make a demo of your site on stackblitz that would be so much easier. Also you can check that example above and see if it helps to adjust your code to look similar. Another thing I noticed you have "sync: false" in wrong line, it should be inside transition object like this: barba.init({ transitions: [ { sync: true, async leave(data) { const done = this.async(); $(data.next.container).addClass('fixed'); pageTransition(); await delay(1000); done(); }, }, ], });

I'm not sure if this is what you're going after, as you didn't explain it that well what you're trying to achieve (sorry for being straightforward :P), but from what I can see you're using sync mode, so probably you want both animations happen at same time, and you see some annoying flicker, and other animation doesn't play correctly, right? In sync mode, you neeed to handle the positions absolute/fixed of barba containers yourself, as they will show at the same time in static position, the next page container will be next to the old one (which will be out of screen), until the previous page container disappears (after first transition is complete) and the new container will show in position of old one - just imagine two divs, that have width of 100% viewport next to each other, and you change display of the first one to "none" - it's similar behaviour. So long story short, you need to add class .fixed (you can name it whatever), set position to fixed and higher z-index .fixed { position: fixed; top: 0; left: 0; z-index: 10; } Then on your barba leave hook, you need to add (with jQuery, I tried to do it with vanilla js but for some reason it doesn't work for me) $(data.next.container).addClass('fixed'); And lastly, on your enter, afterEnter, or after hook (depending on your setup), you have to remove it $(data.next.container).removeClass('fixed'); Then the transitions should work. Hope it works for your case!

Decided I should leave this here and contribute for once lol ?. Update : For anyone who might be coming to this in the future , I observed that when I resized the window the markers updated their position idk why but this is absolutely unreal because what I did was basically simulate a window resize to get the markers back to their desired locations So for anyone who comes to this and observes your scroll markers are in a different position after a Barba page transition , this is what I did I have my afterEnter hook calling a function called aboutInit to handle all page onboarding issues I'm facing, in the function what it does first is what I mentioned above checks all the classes in the DOM for gsap one's against a regex and then finds these gsap markers and removes them so now you're only left with no markers . Then I call my actual function to do the horizontal scroll effect and give me a brand new set of markers and now you're left with that set of markers in the wrong positions (as stated above - read that before continuing ). So then just simulate a window resize event to kick the markers back into their original positions then everything is in order and your animation should start and end in the right place . What I did was check the top position on just reload of the page in the right original position , then do a barba transition let all this happen above and bam left with the same top positions for the markers. Hope that makes sense . ? Here is the code - aboutInit // About Page Functions const aboutInit = () => { let horizontalscrollAnim, cleanGSAP() if(typeof horizontalscrollAnim === "undefined") { scroll_facts_tl_func(); } window.dispatchEvent(new Event('resize')); } const cleanGSAP = () => { const allClasses = [...document.querySelectorAll('[class]')] let gsapArray = [] if(allClasses.length <= 134) return for (var i = 0; i < allClasses.length; i++) { if (/gsap-/.test(allClasses[i].className)) { gsapArray.push(allClasses[i].className); } else break } gsapArray.map(tag => document.querySelector(`.${tag}`).remove()) } //You don't need this but it's just so you know what I'm calling const scroll_facts_tl_func = () => { const facts = [...document.querySelectorAll('.fact')], factsContainer = document.querySelector('.factsContainer'); let xPercent window.matchMedia("(max-width: 600px)").matches ? xPercent = -85 : xPercent = -115 horizontalscrollAnim = gsap.to(facts, { xPercent: xPercent * (facts.length - 1), ease: "none", scrollTrigger: { trigger: ".factsContainer", pin: true, pinSpacing: true, // markers: true, scrub: 1, snap: 1 / (facts.length - 1), start: "top top", // base vertical scrolling on how wide the container is so it feels more natural. end: `+=${factsContainer.offsetWidth}` //4320 } }); } Helper Methods // Helper Functions const delay = (ms) => { return new Promise(resolve => setTimeout(resolve, ms)); } Barba Initialization barba.init({ sync: true, transitions: [{ name: 'transition-base', async leave() { const done = this.async(); pageTransition(); await delay(1000); done(); }, async enter() { window.scrollTo(0, 0); }, }], views: [ { namespace: 'about', afterEnter() { aboutInit() } } ], }); Here's also a Test Site I put to show what I mean just do exactly as stated to see the effect and discreptancy in the markers positions due to Barba transition 1. Go to https://testbarba.netlify.app/ 2. Click the about page - this will trigger barba transition - take note of the markers positions(end and start in the inspect element) 3. Then just reload the about page and you will notice the different positions of your markers upon load (again in the inspect element) 4. You can use above to fix this , if this is your problem Cheers Adam

Hi adamoc, I was able to get everything working by making sure that all my functions that are located inside the barba-container (i.e. the content container that gets replaced) get reloaded everytime a barba transition ends. So basically, let's say you have a function: function function_name() { // Function } You have to reinit that function everytime a page transition ends, using a Barba hook: barba.hooks.afterEnter(function() { function_name(); }); More info on the Barba hooks: https://barba.js.org/docs/advanced/hooks/ Functions that are inside the wrapper, but not the container (so the functions that do not get replaced every page transition) do not have to be releoded.

I am using Barba js v1 and GSAP v3 so it may not be useful for you though.. I referenced Barba official page（https://barba.js.org/v1/transition.html）and added code for GSAP and ScrollMagic. var FadeTransition = Barba.BaseTransition.extend({ start: function() { Promise .all([this.newContainerLoading, this.fadeOut()]) .then(this.fadeIn.bind(this)); }, fadeOut: function() { // you can use your own GSAP animation here before transition like below. // TweenMax.to(".menu ul li", 0.4, {y: 20, opacity: 0, ease: Power2.easeInOut}); return $(this.oldContainer).animate({ opacity: 0 }).promise(); }, fadeIn: function() { $(window).scrollTop(0); var _this = this; var $el = $(this.newContainer); $(this.oldContainer).hide(); // you use your own GSAP animation here after transition like below. // var l1 = new TimelineMax({paused : false}); // l1 // .set(".menu-overlay", {display:"block"}) // .to(".block.b1", 1.0, {y : "-50%", ease: Power4.easeInOut // },.3) $el.animate({ opacity: 1 }, 400, function() { _this.done(); }); } }); Barba.Pjax.getTransition = function() { return FadeTransition; }; Barba.Pjax.start(); Barba.Dispatcher.on('newPageReady', function( currentStatus, oldStatus, container, newPageRawHTML ) { // you can use ScrollMagic and GSAP animation here like below. // var controller = new ScrollMagic.Controller(); // var tlWeb = new TimelineMax(); // tlWeb // .from("#web.two-col .bg",.5,{opacity: 0}, 0) // .to("#web h2",.5,{className:"+=enter"},0) // .fromTo("#web .text p", .7,{y: 10, opacity: 0, ease: Power2.easeInOut},{y: 0, opacity: 1, ease: Power2.easeInOut},.3) // .fromTo("#web .more", .7,{y: 10, opacity: 0, ease: Power2.easeInOut},{y: 0, opacity: 1, ease: Power2.easeInOut},.6) // .fromTo("#web.two-col img", .7,{y: 10, opacity: 0, ease: Power2.easeInOut},{y: 0, opacity: 1, ease: Power2.easeInOut},.9) // var sceneWeb = new ScrollMagic.Scene({ // triggerElement: '#web', // offset: '0' // }) // .addIndicators({ // colorTrigger: "white", // colorStart: "white", // colorEnd: "white", // indent: 5 // }) // .setTween(tlWeb) // .addTo(controller); });

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

Thank you very much! Seems like I was a bit too quick in drafting my question and in my original post, it was indeed intentional. I followed the guide throughout and my experience with GSAP is a bit limited and none existent with Barba.js so I tried to do everything in the video and yet it didn't work. This is what I have in my script for barba, however I never got the page transition console log in my function pageTransition() so the function is never called. import barba from "@barba/core"; barba.init({ sync: true, transitions: [ { async leave(data) { const done = this.async(); pageTransition(); await delay(1500); done(); }, }, ], }); function pageTransition() { let tl = new TimelineMax(); tl.to(`ul.transition li`, 0.5, { scaleY: 1, transformOrigin: "bottom left", stagger: 0.2 }); tl.to(`ul.transition li`, 0.5, { scaleY: 0, transformOrigin: "bottom left", stagger: 0.1, delay: 0.1 }); console.log("page transition"); } function delay(n) { n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n); }); } So at that point, I thought okay maybe I can just try to do the animation and avoid Barba.js since I can't make work but in my original post, the function is called and I get the console.log("page transition" but the animation with the yellow stripes doesn't show and I have no clue to why it doesn't. I am not sure if I missed something in my setup or the animation code itself! However, I appreciate your input and I hope it cleared up some confusing from my part!

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

Hi there, This is my first post and my first project with GSAP. I'm using it in conjunction with Barba.js. As barba js basically creates a single page app, im having to kill and reinitialise my scrolltriggers on each page load so that they dont keep getting initialised on top of each other. Im doing this with this code: ScrollTrigger.getAll().forEach(t => t.kill()); This is working. However i also have some scrolltriggers that are outside of my barba container (eg, inside the footer that remains constant and does not reload). These are also being killed within the above code and i need them not to be. So i believe that what i need to do is only kill the scrolltriggers contained within my barba container but not the ones outside of the barba container. Can i do this by targeting all scrolltriggers within a container div that has an id? thanks for any help

You have to update your wrapper and content on barba transition i dispatch new custom event with detail of next barba container then in class where i have my smooth scroll i listen to that event and update wrapper and content. i hope this helps.

Hi All… Trying to learn GSAP using Barba – I’m self-taught so constantly running into issues and thanks for this forum it has helped in many ways. I am hoping this question can be answered without a demo, because I am working in a dynamic environment and my issue is related to navigating from project to project, which technically is the same layout within the system, just loading in the content dynamically based on the project. To set this up, using JS & HTML, I have the latest versions of GSAP, ScrollTrigger, & Barba plugged up and the page transitions work from one page type to the next – took some time, but slowly figured it out. My issue now, are the project pages of the site within the portfolio section. The first time you navigate to a project, the page transitions and tl animations work as I created. The problem is when I navigate from one project page to the next project, on leave the page transitions out as expected, but then nothing is happening on enter. The page transition and tl animation don’t seem to reload. I have tried kill, reset, & clearProps – it could be the placement, but tried it many places with no luck. Based on the console logs everything is firing based on the sequence I setup, but I feel the whole page/timelines/ScrollTrigger needs to be reset/restart. Also, not sure where to place the reset – within Barba I am using both views and transitions. It is just the page is loading on to itself so how do I reset everything, so it starts all over and goes through all the animations when you go to the next project page. Any direction or link to other examples would be helpful.

You are still creating all the other ScrollTriggers in a global hook though and you've got a couple of warnings hinting you about that on the subpage. I don't have the time to dig in deep, but honestly I don't think it's an easy fix like that. Because of how you are handling things (e.g. as mentioned above) you are creating some problems. One of them being that you are not keeping the proper order for the execution of things with regard to ScrollTrigger to work with locomotive-scroll. And I'm pretty sure that with the way you are handling things, you are also creating a new instance of locomotive scroll on every page transtion if you haven't noticed, thus you might have to kill the old one. Also barba will have the current container and the next container in the DOM at the same time when that hook you created in the view fires, so you might have to remove the current container in a global hook before you create new ScrollTriggers or else their positions won't be set correctly - or rather: they will be set correctly by ScrollTrigger, but they will not be where you think they are because of that. Those are just the things that I can think of off the top of my head - there might be other things at play on top of that here. But there is just too much involved for me to offer any more help than that. You are trying to combine three libraries that need rather careful handling to work as intended on their own already, and getting them to work together needs you to be extra careful with the order of execution - most of it comes down to the logic of how barba works in the end, and that is nothing I can guide you with.

I can not really give you any advice on that without seeing it in context, I'm afraid. There are just too many possible reasons why it doesn't work as you'd expect. It might be just another logic problem that you'd have to find a solution for within the context of barba (which would be my best guess here), like having to kill all your ScrollTriggers when leaving a page and re-initializing the page-specific ScrollTriggers when entering a new page. You'll find a link collection to different threads on that one in this thread here. It might just as well be something totally different, though. This thread here might also be helpful, as it links to another code example of GSAP together with Barba and to @ihatetomatoes' learning ressources. He also offers awesome courses on GSAP with Barba, the latest of them also with ScrollTrigger incorporated, if I am not mistaken. These forums actually try to stay focussed on GSAP specific questions, but if none of those ressources linked to does help you find a solution, I could take a peek at your code, if you'd update your codepen project (or even better create a minimal new one so the context of the previous questions remains intact) and I find the time.

@akapowl thank you very much - I would have never figured that out on my own. Plus I have not seen any other examples setup this way anywhere. I feel like I have seen these types of pages transitions using GSAP & Barba. This has solved my initial issue and your explanation makes sense. I am just not 100% sure I understand the pattern, but again not a JS expert at all. I got these changes added to a more complex framework and got the base page transitions working. Based on this page type is leaves & enters how i want - and set it for 2 different pages types! Now, I am running into other issues where I need to reset GSAP arrays... So within the individual page enter function, we are animating other elements after the page loads and when the user scrolls down the page - we have images staggering/animating in with a parallax effect. Any thoughts on how to reset these too? using your (el) to reset the elements within these functions. So these work on the initial page load, but not when you go to next container with the same namespace these arrays are not starting from scratch. example of one of the arrays - how would I reset something like this? sap.utils.toArray('.section-parallax .parallax-content').forEach((section, i) => { const heightDiff = section.offsetHeight - section.parentElement.offsetHeight; gsap.fromTo(section, { y: -heightDiff }, { scrollTrigger: { id: 'collectionParallax', trigger: section.parentElement, scrub: true }, y: 90, ease: "none" }); }); Is my issue a combination of GSAP & Barba ? Or strictly a Barba issue? Or is it how I am structuring my JS? I guess I was naïve to think that I could just reset everything back to the initial starting point when the next container loads. Let me know if you if you have any thoughts or other examples we can take a look at. Thank you for the help. Made it over a big hurdle! No on to the next one!

Hey so I've done my best to strip down further (figured you meant removing all animation code from main.js), added the missing reference to swipeup, added the reference to the subpage.css on index.html and also the missing css for the loader SVG. https://stackblitz.com/edit/web-platform-7jbj9m?file=js/main.js It did occur to me that it'd be better to have two JS files for each of the pages - I struggled to find any info or examples of how to make that work with barba to be honest. Totally understand in terms of getting my head more into barba - I've watched lots of videos and read through the docs in detail, but found it a stretch to apply the hooks/required kills and refreshes with my particular set of demands - an svg transition between pages with ScrollTriggers and Loco Scroll.

Hi there , I'm definitely having the same issue and thank god I found this forum because I was thinking i was going insane trying to find the bug. So basically as I'm guessing this is why my ScrollTrigger is not working as expected with BarbaJS as I navigate from the homepage to about page on my portfolio site everything else works as expected but sometimes the markers are out of their places . Which is even more weird is that sometimes the behaviour is actually perfect when viewed on mobile and then other times not on mobile but i'm guessing it has something to do with the Barba Removing of my elements so basically what you advise me to do is make reference variables to the elements I want to animate with GSAP and then call a function in beforeAfter () hook to redeclare those variables to new elements that Barba has swapped in and then pass them to the gsap animations. Or what do ye( @GreenSock @Yannis Yannakopoulos, @2malH) mean kill the scrollTrigger instance , why do I need to do that , is that just an easier way of doing what I've just implied above?? homepage.js //Variable Declarations and Function Definitions let viewBox = "" heading_Pos = [0, 0] displayState = "" hamburger_display_button = Array.from($('.mobile_nav_sticky'))[0] opened_nav_buttons = document.querySelector('.options') logo = $(".Actual_Logo_Svg") // Morphing Circles and ellipses to paths to be able to morph them and checking the viewbox for device size MorphSVGPlugin.convertToPath("ellipse"); shapes = Array.from($('.Logo_In_Shapes path')) const homeInit = () => { viewBox = "", heading_Pos = [0, 0], displayState = "" hamburger_display_button = Array.from($('.mobile_nav_sticky'))[0] opened_nav_buttons = document.querySelector('.options') logo = $(".Actual_Logo_Svg"); // Morphing Circles and ellipses to paths to be able to morph them and checking the viewbox for device size MorphSVGPlugin.convertToPath("ellipse"); shapes = Array.from($('.Logo_In_Shapes path')) } const logo_tl_func = () => { let logo_tl = gsap.timeline({ onComplete: moveLogo, }) // Morphing into the Logo logo_tl.from(shapes, 1, { y: -600, autoAlpha: 0, ease: "bounce", stagger: 0.15 }) logo_tl.to(shapes, 1, { fill: '#F0C368', stagger: 0.05 }) let firstAnimation = gsap.to('.shapes', { duration: 2, morphSVG: ".Logo_Proper_Background" }); let secondAnimation = gsap.to('.textShape', { duration: 2, fill: '#1D373F', morphSVG: ".Logo_Proper_Text" }); logo_tl.add([firstAnimation, secondAnimation]) } const changeViewBox = media_query => { media_query.matches ? viewBox = "-150 -180 2495 890" : viewBox = "-150 -350 3574 880" media_query.matches ? heading_Pos = [-511, -15] : heading_Pos = [-1540, 40]; media_query.matches ? displayState = "none" : displayState = "block" } const moveLogo = () => { gsap.to(logo, { attr: { viewBox: viewBox }, duration: 3 }) fadeInHeadingAndLinks(); } const fadeInHeadingAndLinks = () => { gsap.to('.nav_links', { display: displayState, scale: 1, duration: 3 }) gsap.to('.logo_heading', { display: "block", x: heading_Pos[0], y: heading_Pos[1], // scale:1, duration: 3 }) gsap.to('.mobile_nav_sticky', { display: "block", scale: 1, duration: 5 }, "+=.7") } const pageTransition = () => { var tl = gsap.timeline(); tl.set('.loading_container img', { scale: 0.3 }) tl.to('.loading_container', { duration: 1.2, width: "100%", left: "0%", ease: "circ.out", }) .to('.loading_container img', { scale: 0.6, duration: 1 }, "-=1.2") .to('.loading_container', { duration: 1.2, width: "0%", right: "0%", ease: "circ.out", }) .to('.loading_container img', { scale: 0.3, duration: 1.2 }, "-=1.3") } // Helper Functions const delay = (ms) => { return new Promise(resolve => setTimeout(resolve, ms)); } // Initialization Methods $(document).ready(() => { window.matchMedia("(max-width: 600px)").matches ? logo.attr('viewBox', '-350 -700 1274 1680') : logo.attr('viewBox', '-680 -380 2074 1080') var viewbox = window.matchMedia("(max-width: 600px)") changeViewBox(viewbox) }) hamburger_display_button.onclick = () => { opened_nav_buttons.classList.toggle('open') } barba.init({ sync: true, transitions: [{ name: 'transition-base', preventRunning: true, timeout: 5000, async leave() { const done = this.async(); pageTransition(); await delay(1000); done(); }, async enter() { window.scrollTo(0, 0); }, }], views: [ { namespace: 'home', afterEnter() { homeInit() window.matchMedia("(max-width: 600px)").matches ? logo.attr('viewBox', '-350 -700 1274 1680') : logo.attr('viewBox', '-680 -380 2074 1080') let viewbox = window.matchMedia("(max-width: 600px)") changeViewBox(viewbox) logo_tl_func(); hamburger_display_button.onclick = () => { opened_nav_buttons.classList.toggle('open') } }, }, { namespace: 'about', afterEnter() { aboutInit() face_tl_func() scroll_p_tl_func() scroll_skills_tl_func() scroll_facts_tl_func() }, } ], }); // //Global Hooks // barba.hooks.leave(() => { // const done = this.async(); // pageTransition(); // await delay(1000); // done(); // }) // barba.hooks.enter(() => { // window.scrollTo(0, 0); // }) about.js // Variable Declarations and Function Definitions let factsContainer_sm = document.querySelector(".factsContainer_sm") const aboutInit =() => { factsContainer_sm = document.querySelector(".factsContainer_sm") let head = document.getElementsByTagName('head')[0], link = document.createElement('link') link.rel = 'stylesheet' link.href= "../../Resources/CSS/about.css" head.appendChild(link); } const face_tl_func = () => { let face_tl = gsap.timeline(), paths = document.querySelectorAll('.My_Face path'), filledYellowElements = ['.Main_Hair_Part', '.Eyeball_2', '.Eyeball_1', '.Nostril_1', '.Nostril_2', '.Tongue_Part'], filledNavyElements = ['.Pupil_2', '.Pupil_1']; face_tl.set(filledNavyElements, { fill: 'unset' }), face_tl.set(filledYellowElements, { fill: 'unset' }), face_tl.fromTo(paths, { drawSVG: "0%" }, { duration: 1, drawSVG: "100% ", stagger: 0.15 }) let firstAnimation = gsap.to(filledYellowElements, { duration: 2, ease: "slow", fill: '#F0C368' }, "-=.7"), secondAnimation = gsap.to(filledNavyElements, { duration: 2, ease: "bounce", fill: '#1D373F' }, "-=.7") face_tl.add([firstAnimation, secondAnimation]) } const scroll_p_tl_func = () => { let scroll_tl = gsap.timeline({ scrollTrigger: { trigger: '.content', start: "top center", end: "+=1000", markers: true, scrub: true // pin: true } }) scroll_tl.to('.first', { transform: "rotateX(50deg) rotateZ(331deg) translateX(42px)", duration: .5, }), scroll_tl.to('.flag', { scale: 1 }, '-=.1'), scroll_tl.addLabel("first_down") scroll_tl.to('.second', { transform: "rotateX(50deg) rotateZ(331deg) translateX(42px)", duration: 2, }, "first_down-=.1") scroll_tl.addLabel("second_down") scroll_tl.to('.third', { transform: "rotateX(50deg) rotateZ(331deg) translateX(42px)", duration: 2, }, "second_down-=.01") } const scroll_skills_tl_func = () => { let scroll_tl = gsap.timeline({ scrollTrigger: { trigger: '.skillsContainer', start: "top center", markers: true, } }), barWidth = "", bars = [...document.querySelectorAll('.bar')] bars.map(bar => { barWidth = bar.dataset.width; let barAnimation = gsap.to(bar, { width: barWidth, duration: 1, delay : .2 }), percentageAniamtion = gsap.to('.percentage', { scale: 1, }) scroll_tl.add([barAnimation, percentageAniamtion]); }) } const scroll_facts_tl_func = () => { let scroll_tl = gsap.timeline({ scrollTrigger: { trigger: '.factsContainer', start: "top center", // pin: true, scrub: true, end: "+=300", markers: true, } }), facts = [...document.querySelectorAll('.fact')] scroll_tl.to('.factsContainer h2', { scale: 1.5, duration: 1, ease: "slow" }) scroll_tl.to(facts, { xPercent: -85 * (facts.length - 1), scrollTrigger: { trigger: ".factsContainer_sm", start: "center center", pin: true, // pinSpacing:false, markers: true, scrub: 1, snap: 1 / (facts.length - 1), // base vertical scrolling on how wide the container is so it feels more natural. end: () => `+=${factsContainer_sm.offsetWidth}` } }); } // //Initialization Methods // aboutInit() // face_tl_func() // scroll_p_tl_func() // scroll_skills_tl_func() // scroll_facts_tl_func() Here's my homepage - https://adamoceallaigh.netlify.app/ and here's my about page - https://adamoceallaigh.netlify.app/about.html