Search the Community

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, I've added the below scripts to the header.php file of our website. <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js id='gsap-js'></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollToPlugin.min.js' id='gsap-scroll-js'></script> <script type='text/javascript' src="https://unpkg.com/@barba/core"></script> My HTML and JS is below. I can console.log out from within the functions so I know they're loading however the GSAP does not seem to be. I'm also not getting any errors in console. The website is on wordpress divi theme if this is any help. <div id="intro"> <section class="video-panel" data-section="creative" data-permalink="#" style="right: 50%;"> <div class="video-holder"> <video class="overview-reel" playinline="" loop="" muted="" autplay="" preload="auto" src="/wp-content/uploads/2021/11/2.mp4"> </video> <h1> <span>Projects</span> </h1> </div> </section> <section class="video-panel" data-section="solutions" data-permalink="#"> <div class="video-holder"> <video class="overview-reel" playinline="" loop="" muted="" autplay="" preload="auto" src="/wp-content/uploads/2021/11/2.mp4"> </video> <h1> <span>Client Services</span> </h1> </div> </section> </div> gsap.registerPlugin(ScrollToPlugin); window.addEventListener("load", function(e) { (function onIntroLeave(e) { gsap.to('#intro .video-panel[data-section="creative"]', { duration: 0.5, right: '50%', ease: "power3.out" }) }) (function onIntroHover(e) { var per = (e.pageX - window.innerWidth / 2) / (window.innerWidth * 2); var dir = Math.min(1, Math.max(-1, e.pageX - window.innerWidth / 2)); var pow = Math.pow(per * 5.5, 2); var right = Math.min(100, Math.max(0, 50 + (50 * pow * dir))) + '%'; gsap.to('#intro .video-panel[data-section="creative"]', { duration: 0.5, right: right, ease: "power3.out" }) }) (function onIntroClick(e) { intro.removeEventListener('mousemove', onIntroHover); var section = this.dataset.section; var permalink = this.dataset.permalink; if (section === 'creative') { var headerX = '-3em' var right = '0%' var otherVideo = intro.querySelector('.video-panel[data-section="solutions"] video') } else { var headerX = '3em' var right = '100%' var otherVideo = intro.querySelector('.video-panel[data-section="creative"] video') } otherVideo.pause() barba.prefetch('/' + section) gsap.to('#intro .video-panel[data-section="creative"]', { duration: 0.5, right: right, ease: "power3.inOut" }) gsap.to('#intro .video-panel[data-section="' + section + '"] video', { duration: 0.5, width: '100vw', height: '100vh', ease: "power3.inOut" }) var circle = gsap.to('#intro .video-panel[data-section="' + section + '"] video', { duration: 1, css: { clipPath: 'ellipse(101vw 101vw)' }, ease: "power3.inOut" }) gsap.to('#intro .video-panel[data-section="' + section + '"] h2', { duration: 0.5, x: headerX, ease: "power3.inOut" }) circle.eventCallback('onComplete', openPage, [section, permalink]) }) // (function videoLoaded() { // vLoaded++; // if (vLoaded === vCount) { // introLoaded(); // pageLoaded(); // } // }) }); Thanks

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.

Hi there! I'm trying to build a WordPress website which has a effect like this: https://artemsemkin.com/rhye/wp/slider-8-circle-covers-v/ If you click on "explore project" the image will expand so that there is a seamless animation into the new portfolio page. After using GSAP from time to time, I came across the Flip Plugin and it looks like that you can achieve a similar effect using this plugin (GSAP Demo Pen below). Since I am using the non-headless WordPress the DOM will change completely switching the pages. So I guess I need the portfolio detail page to be dynamically loaded with for example AJAX in order to make it work with the Flip Plugin, is that correct? I've also read a lot about Barba JS which could help me to achieve it, too (it looks like the author from the WordPress-Theme is using this as well). Is there anyone who build something like this on his own or can tell me briefly what steps need to be taken in order to achieve the animation? Would the Flip Plugin be a good choice here? It looks like my question may not be directly related to GSAP, so I hope you don't mind me asking. Thanks in advance!

Hello @Maddy - welcome to the GreenSock forums. I'm not familiar with Angular at all, but it sounds like you are in an SPA-environment, and the fact that you are seeing the markers multiple times is a sign for you probably having to kill all the old ScrollTriggers when leaving a page and then create them from scratch when you enter the new page. This is from an article on the most common ScrollTrigger mistakes: If you have a single-page application (SPA; i.e. a framework such as React or Vue, a page-transition library like Highway.js, Swup, or Barba.js, or something similar) and you use ScrollTrigger you might run into some issues when you navigate back to a page that you've visited already. Usually this is because SPAs don't automatically destroy and re-create your ScrollTriggers so you need to do that yourself when navigating between pages or components. To do that, you should kill off any relevant ScrollTriggers in whatever tool you're using's unmount or equivalent callback. Then make sure to re-create any necessary ScrollTriggers in the new component/page's mount or equivalent callback. In some cases when the targets and such still exist but the measurements are incorrect you might just need to call ScrollTrigger.refresh(). If you need help in your particular situation, please make a minimal demo and then create a new thread in our forums along with the demo and an explanation of what's going wrong. For how to kill them, have a look at this answer... ... and maybe this thread can help when it comes to specifics of Angular.

Hi Zofia, I don't think it not working anymore is related to GSAP or ScrollTrigger but rather to how Svelte works. I'm logging out the element that you are targetting as the trigger here and except for the first load it will always target the one on the page you left and not the one on the page you are going to. I can only speak from my experience with barba.js where both 'pages' will be in the DOM at the same time for a certain duration so you somehow have to work around that when wanting to target things on the new page - this looks like it might a similar case. So you might have to find out how to target only elements on the new page in Svelte when doing transitions. https://stackblitz.com/edit/sveltejs-gsap-220222-b-dtnpbb

Hi Guys, I have been having the same problem and I think I figure it out, this worked for me: Pack all your animations on one single function and call the function once your site load something like: initGsap(); function initGsap(){ // All gsap animations with ScrollTrigger and/or ScrollSmoother } On barba.js init function place this and on the After hook call you initGsap function: async afterLeave(data) { let triggers = ScrollTrigger.getAll(); triggers.forEach(function (trigger) { trigger.kill(); }); }, async after(data) { initGsap(); } And that's it, you will remove the scrollTrigger methods and then reload all your animations. Hope that helps (sorry for my bad english)

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!

Thanks again @akapowl, i wasn't aware of the duplicate, i found out it is because the barba container must be inside the locomotive container. I hope i can do it. Thanks!

The problem is, that with your order of execution you are not sticking to the order that is neccessary for things to work properly. The code for implementing locomotive-scroll to work with ScrollTrigger via .scrollerProxy() that you likely got from the example on the .scrollerProxy() documentation page has comments; one of them (at the very end) says: // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh(); So you would either have to make sure to stick to the order provided in there to begin with, or you will need to call ScrollTrigger.refresh() again after all your ScrollTriggers have been created. I just quickly threw a .refresh() call at the very end of your Stuck() function, just to show the difference it makes. https://stackblitz.com/edit/web-platform-ydejfq Also, you may not have noticed that you actually appear to be creating more and more instances of locomotive scroll with every page-transition, so that is something I would concentrate on fixing first, because it is the most likely to throw things off with regard to ScrollTrigger in the long run. But as Jack already mentioned, neither locomotive-scroll nor barba.js are GreenSock products, so that is nothing we can help with. Good luck with the project!

Hi @Ocamy. LocomotiveScroll and Barba are not GreenSock products, so we can't really support those here. Sorry. If you have any GSAP-specific questions and can provide an isolated minimal demo that's not using 3rd party tools like that (which are likely the culprits of the problems), we'd be happy to take a peek. You are welcome to post in the "Jobs & Freelance" forum if you'd like to find paid support/consulting. As for the mobile stuff, you could try setting ScrollTrigger.config({ignoreMobileResize: true}) and maybe even ScrollTrigger.normalizeScroll() to see if it helps. Good luck!

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

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); });

Hi tractaNZ, I'm a little unclear about what you're asking here. This really isn't the best place to ask about barba's API, but I would assume that if you transitioned to a new page, then you would need to create your ScrollTriggers again. It's whole a new set elements, so even if your previous ScrollTrigger instances were stored in memory, refreshing isn't going to do anything as those elements don't exist anymore. And you don't need to include a function inside the same file to call it. Assuming you didn't nest scrollFunction inside another function, it should be global. If not, you can always make it global. window.foo = () => { console.log("hello"); }; // in another file foo(); // hello // or window.foo();

Ha, that looks a bit like a best off of my forum answers 😋 ...just kidding; good job getting it all together ! 💪 But it still is a whole lot (too much) to parse through. I even had to look around for the link that is supposed to bring you to the other page for quite a while to begin with. I am pretty sure it is a barba-logic related issue you are having, and as you might already have read in one of the other posts, the GSAP forums would not exactly be the right place to ask about that - as they are supposed to help with directly GSAP related questions. I could offer to have another look, but: If you are having problems with just the transition, it would be great if you could a) reduce everything to that sole problem, so it becomes a lot easier to concentrate on that - everything else doesn't seem needed if all that doesn't work for you is the transition itself. and b) port things over to stackblitz, where I can easily fork and tinker with things - as the number projects one can have on codepen is very limited. One thing I can tell you right away with regard to your ScrollTriggers is that you will definitely have to call ScrollTrigger.sort() after you have set all your ScrollTriggers up [or alternatively set refreshPriorities], because you are not creating them in order of appearance on the page, but are creating (some of) them in loops and your fake-horizontal section for instance doesn't work as supposed to because of that. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.sort() Edit: And after another look I realized that your loaderIn() and loaderAway() functions are faulty. For one, you are targetting an element, that is supposed to have the class swipeup, but you don't have such an element anywhere - neither on the index.html nor the subpage.html The other thing is, that you can not sequence tweens like that. You will probably want to set up a timeline and return that timeline from that function. // bad function loaderIn() { // GSAP tween to stretch the loading screen across the whole screen return gsap.set(swipeup, { autoAlpha: 1, attr: {d: "M 0 100 V 100 Q 50 100 100 100 V 100 z"} //bottom line }, { duration: .8, ease: "power4.in", attr: {d: "M 0 100 V 50 Q 50 0 100 50 V 100 z"} //arc top }, { duration: .5, ease: "power2", attr: {d: "M 0 100 V 0 Q 50 0 100 0 V 100 z"} //full square } ); } Bad... https://codepen.io/akapowl/pen/vYpwopZ ... vs. better. https://codepen.io/akapowl/pen/mdpYNXq

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 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

Thank you so much for your quick and informative replies . Okay I get what you are saying @mdelp and @akapowl and have updated my JS code to use a function to restart the timeline upon call in the hook all at once but it doesn't seem to be working and I can't tell why , it appears the individual tweens ( gsap.to) is working as the heading is being pushed in upon homepage revisit after navigating with barba , and this is enabled by using a seperate tweens and not a timeline , so is it a problem with the timeline ??. But then I have tried to use a hamburger button in the phone version it pops up and i tried to click it and i'm able in the first instance but seems that script stops working upon return after barba navigation . I've tried putting the code back into the hook (beforeAfter as indicated above) and to no avail , and as indicated above I think if i put another script in to tod something subsequent to the gsap it probably wouldn't work either so how do i get around this issue or fix my existing code to basically refresh all the scripts, like the function window.load or $(document).ready(()=>{}) would do ?? //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 logo_tl_func = () => { let logo_tl = gsap.timeline({ onComplete: moveLogo, }) // Morphing into the Logo logo_tl.staggerFrom(shapes, 1, { y: -600, autoAlpha: 0, ease: "bounce" }, 0.15) logo_tl.staggerTo(shapes, 1, { fill: '#F0C368', }, 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]) console.log('Well you should have animated rn') } 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.fromTo('.logo_heading', { x: 1340, y: 20 }, { 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.to('.loading_container', { duration: 1.2, width: "100%", left: "0%", ease: "Expo.easeInOut", }) .to('.loading_container', { background: "#f0c368" }) .to('.loading_container', { duration: 1.2, width: "0%", right: "0%", ease: "Expo.easeInOut", }) } // 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: [{ async leave(data) { const done = this.async(); pageTransition(); await delay(1000); done(); }, async enter(data) { window.scrollTo(0, 0); }, }] }); // barba.hooks.enter(() => { // }); barba.hooks.afterEnter(() => { logo_tl_func() hamburger_display_button.onclick = () => { opened_nav_buttons.classList.toggle('open') }; }); https://adamoceallaigh.netlify.app/ Cheers , Adam

Thank you so much or this. The CleanGSAP helped me get BarbaJS and Scroll trigger working! function galleryScroller(){ ScrollSmoother.create({ smooth: 1, effects: true }); const galleryWrapper = document.querySelector('.gallery-wrapper') const gallery = document.querySelector('.gallery') const tl = gsap.timeline() tl.to(gallery, { x: `-${gallery.offsetWidth}`, scrollTrigger: { trigger: galleryWrapper, start: 'top top', end: `+=${gallery.offsetWidth}`, pin: true, scrub: 0.5, } }) } const cleanGSAP = () => { ScrollTrigger.getAll().forEach(t => t.kill(false)); ScrollTrigger.refresh(); window.dispatchEvent(new Event("resize")); }; barba.init({ transitions: [ { name: 'index', once() { //siteFirstLoad(); galleryScroller(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async afterEnter() { galleryScroller(); }, to: { namespace: [ 'index' ] }, }, { name: 'default', once() { siteFirstLoad(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async beforeEnter() { cleanGSAP(); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, } ] })

Resovled. I use a "parachute" load.js file to get some UI stuff in there early dom ready (don't judge me). It included GSAP core which causing a load conflict somwhere — but also not really needed. So have moved into main app.js and it's loading fine alongside barba Turns out I was loading an older version of ScrollTrigger. Obvious now.

Welcome to the GSAP forums @gn90 Sure, wrapping all you need to re-setup in a function and call that function in a barba hook / view on / after enter, sort of like in the stackblitz example linked below, should actually work. Additionaly you will have to make sure though, to kill any old ScrollTriggers when/after leaving a page and probably also remove any eventListeners, too. The latter you will also have to add again alongside your STs then, when entering a new page. https://stackblitz.com/edit/web-platform-j6l93d?file=js%2Fmain.js For animations to be triggered in fake-horizontal-scrolling scenarios as such, you will want to have a look at the containerAnimation property (and for tying it to the scroll an additional look at scrub). This piece on containerAnimation is from the docs: containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a demo here and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. I hope that'll help a bit. Happy tweening

Hey @OlgaKondr - welcome to the forums. There is a whole lot of things to keep in mind, when combining all of these libraries together. None of what you are experiencing is actually related to GSAP or ScrollTrigger itself - just to the way things need to be set up with smooth-scrollbar or barba. First off, you should iniate your Smooth-Scrollbar, before setting up your ScrollTriggers. Second, I would recommend putting your #viewport for your smooth-scrollbar inside of your data-barba="container" because Third, you will have to re-initialize every script you want to run (flawlessly) on a certain page, after barba has transitioned. Thus, before the transition you will have to kill of your old ScrollTriggers and/or GSAP-Animations, and re-initiate them after the transition for the new page (ideally the same applies for your smooth-scrollbar, too, if you want it to work flawlessly). That is because barba removes everything inside the old container and puts the contents of the new container in the old's place, so ScrollTrigger needs to calculate things for the new page layout. On a further note, it is best to initiate your smooth-scrollbar like this scrollBar = document.getElementById('viewport'); bodyScrollBar = Scrollbar.init(scrollBar, { damping: 0.07 }); See this example of your demo for the use of smooth-scrollbar together with ScrollTrigger https://codepen.io/akapowl/pen/079a512ae9e9030aceb7388d007ee5f2 Before using libraries like these, especially when it is several together, I highly recommend thoroughly inspecting the documentations of those, and trying to understand, how things work. Otherwise you will run into a whle lot of problems further down the road. Hope this helps a bit. Paul

IT WORKS !! thanks a lot man, i tried it and it works, and what matters is now i unsterstand more the barba lifcycle! the next container should be cleared after the flip work is done... now i need to fix the zIndex of the img element, i want it to be on top of everything... thanks again.

What do you mean by this? Also keep in mind that this is a GSAP forum. Given the issue seems to be primarily stemming from the usage with Barba, I don't know how much free support we can offer. My guess is that with the right combination of Barba hooks it will work well. I haven't used Barba much.

Hey @digitalfunction My initial response was totally heading in the wrong direction, so I hope this time I got your problem right. If so, it is a barba related logic problem, that I myself actually stumpled upon in a bit different way and that one of my first questions here was about, so I'll try to help you out here. The reason the individual elements do not animate in anymore on page-change is because in your JS you only get the elements once on page load. Since the elements that are being stored in those variables will get wiped by barba on page-change, there will be no more reference to any elements anymore that you could animate in. So on every page-change you'll have to get the neccessary elements from scratch, as they will change every time. I did that inside each of the functions you are calling here for the animations, and it seems to work just as I'd expect. Is that what you were going for? https://codepen.io/akapowl/project/editor/d04bbd7aa2fcc207f1ab0b363835fab2