Search the Community

Hi, Petr (@Ihatetomatoes) made an entire collection of videos for using GSAP with Barba: Happy Tweening!

Hi everyone, So i'm using gsap splittext plugin to split sentence into words and lines and then animating words. Everything works fine on first load of a page but when i'm navigating to different page and then get back something weird happens and sentence breaks only on last word. We are using gsap with barba js. Here is the demo of a problem, also i tried to replicate problem on codepen but it is lot of work to integrate barba there to make it more accurate. Screen Recording 2021-08-17 at 12.23.45.mov Here is how it looks when it's inspected Sometimes it works as expected, but most of the time it breaks and breaks

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

Hi guys I am new to Greensock and recently I have created a template website using both gsap and barba js. The full code can be found in https://github.com/kitsonchan/template_architecture and you can also view the website directly here https://kitsonchan.github.io/template_architecture/. So now the problem that I have been struggling with is the timeline that was using scrolltrigger. In both of my page Ihave a timeline called tlStage1 and tlStage2. The tlStage1 works completely fine at all conditions but I don't know why tlStage2 only works when you refresh the page. I am not sure if the issue is related to barba js lol so i decide to ask here. Thanks!

Hi guys! I'm learning GSAP a few months, with the help of community, this is my first work using GSAP, in progress yet. Thanks all for help! And i have another question, about page transitions, shared element transitions between pages. See website reference at link: https://alfacharlie.co/ See the effect of transitions between pages, the softness the animations. I used the barba.js in html + css and it worked, but not working fine in wordpress, someone to help me achieve page transitions in wordpress site?

Hello This questions comes with two demos. I have a page with projects in sections. Their headings are pinned with scrolltrigger. This works well: https://codepen.io/mprofitl/pen/JjeNgpG Now, at a click of a button, the whole content should be moved to the right. New content is moved in from the left. The content on the right (the one with scrolltrigger pins) gets position: fixed while staying at its position, the content that came from the left can be scrolled. Please note: Later, another click will scroll stage 1 back in (I did not program that in the demo). https://codepen.io/mprofitl/pen/wvQeWoM For a real life example see https://staging.studiocarch.ch/. Klick any project, it will then move in from the right (opposite direction than the demo). GSAP makes scrolltrigger pins position: fixed. Therefore I cannot move the projects with gsap.to left. The projects move but the pinned headings stay at their place (they just become wider). The demo at the end shows that when clicking the "pan projects" button. https://codepen.io/mprofitl/pen/JjeNgpG I have two questions: How to move stage 1 with pinned content? How to keep all the content of stage 1, including the pinned content, at their positions while the whole stage 1 is fixed? I thought of one approach. Would it be possible to make all content of stage 1 positioned absolutely at their current positions while deactivating scrolltrigger pins? And would be then possible reactivate scrolltrigger without any content jumping? Just for info: I will use Barba.js to load content onto stage 1. My question however is not Barba related. Thanks a lot for your thoughts.

Hi, What is the best practice for gsap with barba ? Should I kill gsap annim on beforeEnter hook ? Thanks, Best regards

Hey all. I have a Barba with GSAP setup for my website. Everything works fine. The navigation on my site also works as intended initially but stops animating suddenly after i navigate to 2 to 3 pages. I am not sure why this is happening. Heres a demo link. http://fingerprints.co.in/protectmyphone/ (Try to navigate to 2 to 3 pages) The text in the menu will stop animating suddenly. Requesting some help in this as i am new to barba and GSAP. Thank you. Burger menu animation code: function pageTransition() { // Toggle Icone hamburger $(document).ready(function () { $('.barres').click(function () { $('.barres').toggleClass('active'); }) }) // Greensock Animations var timeline = new TimelineMax(); timeline.to(".menu", 0.8, { left: '0%', ease: Expo.easeInOut, delay: 0 }); timeline.staggerFrom(".menu ul li", 0.3, { x: -100, opacity: 0 }, 0.1); timeline.reverse(); $(document).on('click', '.barres', function () { timeline.play(); }); $(document).on('click', 'a', function () { timeline.reverse(); $('.barres').toggleClass('active'); }) } Barba setup: barba.init({ sync: true, transitions: [ { async leave(data) { const done = this.async(); data.current.container.remove(); pageTransition(); await delay(1000); done(); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach(t => t.kill()); }, async enter(data) { contentAnimation(); }, async once(data) { contentAnimation(); }, }, ], }); barba.hooks.enter(() => { window.scrollTo(0, 0); });

Here is the link - https://cdpn.io/elsueno/project/editor/XmqJWg Here I'm working on the footer parallax effect from this example - If I apply Barba.js and click navigation "Home", "about" & "Product" then the footer gsap parallax effect as per the link not working properly because Barba not reloading the page and content for the inner page is less compare to the home page. Barba hooks are not handy in this situation because the footer is not included in the Barba container. Can you guys help me?

Hi guys, I have a generall question while starting to use GSAP with barba. I wonder if someone of you could bring light into my JS-darkness at this early point. I am trying to find a solid basic setup with both of the libraries together. barba.init({ views: [{ namespace: 'home', afterEnter(data) { initTimeline1(data.next.container); initTimeline2(data.next.container); initTriggeredTween(data.next.container); }, }] }); const initTimeline1 = (next) => { const tl = gsap.timeline({}) .to(next.querySelector('el1'),{'GSAP MAGIC'}) return tl } const initTimeline2 = (next) => { const tl = gsap.timeline({scrollTrigger:{}}) .to(next.querySelector('el2'),{'GSAP MAGIC'}) return tl } const initTriggeredTween = (next) => { next.querySelector('el3').addEventListener('click', () => { gsap.to(next.querySelector('targetEl'),{'GSAP MAGIC'}) }) } barba.hooks.beforeEnter( () => { ScrollTrigger.getAll().forEach(trigger => { trigger.kill() }); ScrollTrigger.refresh(true) } ) I leaned so far, that I have to kill the ScrollTriggers, because things dont work, if I return to the page with namespace"home". But if I reinititate the timelines, tweens and events again and again I am wondering if I am causing a memory leaks. Do I have to kill, remove, destroy all of them manually or does the garbage collection take care of things by itself? And if I have to manage the things, are there similar support functions like ScrollTrigger.getAll() for helping me out? I just read, that killAll is deprecated. Sorry for my English, and the question which may be a little off topic. Many thanks in advance

Thank you all after some tries I have finally fixed it. This code works for me using GSAP + ScrollTrigger + ScrollSmoother + BarbaJS + AlpineJS import Alpine from 'alpinejs' window.Alpine = Alpine Alpine.start() import barba from "@barba/core"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollSmoother } from "gsap/ScrollSmoother"; gsap.registerPlugin( ScrollTrigger, ScrollSmoother); function contentAnimation () { gsap.set(".animated_ul_title", { opacity:0, x:-20 }); gsap.to(".animated_ul_title", { duration:.4, delay:0, opacity:1, x:0, scrollTrigger: { trigger: ".animated_ul", start: "top bottom-=400px", } }); } function scrollSmootherCreate(){ ScrollSmoother.create({ smooth: 1, effects: true, ignoreMobileResize: true, normalizeScroll: true }); ScrollTrigger.refresh(); }; function galleryScroller(){ 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, } }) } function init(){ // do something before the transition starts barba.hooks.before(() => { }); // do something after the transition finishes barba.hooks.after(() => { ga('set', 'page', window.location.pathname); ga('send', 'pageview'); }); // scroll to the top of the page barba.hooks.enter(() => { window.scrollTo(0, 0); }); barba.init({ transitions: [ { name: 'index', once() { siteFirstLoad(); scrollSmootherCreate(); galleryScroller(); contentAnimation(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async afterLeave() { let triggers = ScrollTrigger.getAll(); triggers.forEach(function (trigger) { trigger.kill(); }); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async after() { scrollSmootherCreate(); galleryScroller(); contentAnimation(); }, to: { namespace: [ 'index' ] }, }, { name: 'default', once() { contentAnimation(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async afterLeave() { let triggers = ScrollTrigger.getAll(); triggers.forEach(function (trigger) { trigger.kill(); }); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async after() { scrollSmootherCreate(); contentAnimation(); } } ] }) } window.addEventListener('DOMContentLoaded', function () { init(); });

Hello Paul, this really is more about how barba works and less related to GSAP - so you might want to consider taking a deeper dive into barba. This here is a nice tutorial that should help understand some things better: https://waelyasmina.com/barba-js-v2-tutorial-for-total-beginners/ Adding a minimal demo is always helpful, even if you think that you are 99% there - with libraries like barba things can become quite complex rather quick - so if you are asking somebody else to give you some help, it would be great to provide them with the tools for being able to offer that help. I created a project for you over on stackblitz with the code provided by @ihatetomatoes For triggereing an animation / setting up ScrollTriggers on page load, you will need to do so either in your 'load' function (where the init() happens) or you could use barbas 'once' hook , if I am not mistaken. In the example I did it in the function on 'load'. If you want to trigger animations / create ScrolTriggers after transitions, you will need to do so in the respective 'hooks' provided by barba (or if you need to do specific things for specific pages only, in the 'views') - or alternatively in an onComplete callback of that loaderAway animation if you want the transition to be complete before you trigger any animation - so it would be best to work with re-useable functions. In this example I used the onComplete callback of the loaderAway tween to trigger a tween on the headline after the page transition is finished completely and I used the after hook provided by barba to set up a ScrollTrigger for the footer. For ScrollTriggers it is also important to kill off the old ones before creating the new, so I added that to the afterLeave hook provided by barba here. I hope all this will help a bit. https://stackblitz.com/edit/web-platform-j6l93d

Hello, I write in the hope of finding a solution to my problem. I am running a website using Gsap (ScrollTrigger), Barba.Js, LocomotiveScroll. Basically when I perform the first page load, the trigger is well positioned (in the middle of the page as in the first image in attached) and everything works perfectly. The problem comes when I change the page (whatever it is). I don't know why the trigger (I use the first navbar as an example, but consequently they all have the same problem) have an offset (see second image). I extrapolate the part of the code that I think (probably) needs to be revised. // NAVBAR function gsapAnim(){ const bg = gsap.timeline({ scrollTrigger: { trigger: "#HPTrigger", scroller: ".smooth-scroll", start: "center top", end: "bottom top", duration: 1, ease: "power4.out", toggleActions: 'play none reverse none', markers: true } }); bg.to(".bg-navbar", {backgroundColor:"rgba(255,255,255,1)"},0); bg.to(".leftline", {borderLeft:"1px solid rgba(230,230,230,1)"},0); bg.to(".rightline", {borderRight:"1px solid rgba(230,230,230,1)"},0); bg.to(".bottomline", {borderBottom:"1px solid rgba(230,230,230,1)"},0); bg.to(".nav-link", {color:"rgba(0,0,0,1)"},0); bg.to(".icon-bar", {backgroundColor:"rgba(0,0,0,1)"},0); } // TRANSITION AND UPDATE function pageTransitionIn({container}) { const tl = gsap.timeline({ defaults: { duration: 1, ease: 'power2.inOut' } }); tl .set(loaderInner, { autoAlpha: 0 }) .fromTo(loader, { yPercent: 100 }, {yPercent: 0 }) .fromTo(loaderMask, { yPercent: -80 }, {yPercent: 0 }, 0) .fromTo(transitionText, {autoAlpha:0},{autoAlpha:1},0.25) .to(container, { y: -150}, 0); return tl; } function pageTransitionOut({container}) { const tl = gsap.timeline({ defaults: { duration: 1, ease: 'power2.inOut' }, // PROBABLY HERE IS THE PROBLEM onStart: () => { window.scrollTo(0, 0); initScript(); } }); tl .to(loader, { yPercent: -100 }) .to(loaderMask, { yPercent: 80 }, 0) .to(transitionText,{autoAlpha:0},0) .fromTo(".comparsa", {y: 100, opacity: 0,},{y: 0, opacity: 1, ease: "power4.out", duration: 3},0.5) .to(".text", { y: "0%", opacity: 1, duration: 2, ease: "power2.out"},0.5) .from(container, { y: 150}, 0); return tl; } // BARBA JS PART function initPageTransitions() { barba.init({ sync:true, /* debug: true, */ /* timeout:7000, */ transitions: [{ name: 'overlay-transition', once(data) { // do something once on the initial page load initSmoothScroll(data.next.container); initLoader(); }, async leave(data) { // animate loading screen in pageTransitionIn(data.current); await delay(1000); data.current.container.remove(); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach(tl => tl.kill()); scroll.destroy(); initSmoothScroll(data.next.container); await delay(1000); }, async enter(data) { // animate loading screen away pageTransitionOut(data.next); } }] }); } The integration of the 3 libraries I think I did it well, so I don't think the problem is with Barba or LS. It is as if there is a problem resetting the trigger. I hope that any solution to this problem will be of help to other people as well. Thanks in advance.

Hello Devs, Please someone to kindly help edit this fade in and out code, to slide up and down or swipe left or right page transitions with Gsap + Barba js here's my code. // Animation - Transition function pageTransition() { var tl = gsap.timeline(); tl.to(".main-fade", { duration: .4, ease: "Power0.easeNone", opacity: "0" }); tl.set(".main-fade", { y: 0, opacity: "1" }); tl.set(".loading-screen", { opacity: 0 }); } thanks

Codesandbox's server doesn't seem to play nicely with barba. I did this locally, and it seemed to work fine, so it should help you get started. index.js gsap.registerPlugin(Flip); let flipState; barba.init({ transitions: [ { sync: true, beforeLeave(data) { const target = data.current.container.querySelector("[data-flip-id]"); if (target) { flipState = Flip.getState(target); } }, enter(data) { const target = data.next.container.querySelector("[data-flip-id]"); if (target && flipState) { gsap.set(data.current.container, { opacity: 0, position: "absolute" }) return Flip.from(flipState, { targets: target, absolute: true, scale: true }); } } } ] }); index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="styles.css" /> <title>Static Template</title> </head> <body> <div data-barba="wrapper"> <main data-barba="container" data-barba-namespace="home"> <a href="cases.html">Cases</a> <div> <img data-flip-id="img" class="thumbnail" src="https://sun6-22.userapi.com/s/v1/ig2/awq7qUcGZAS-9dsYLrQoqJHwj9fpjNo6pi0DdawtulIcSqr6fqicNesTWXdtTwzynhR9S1oHx8G5gUyZMvOeJ12P.jpg?size=400x0&quality=96&crop=1,136,1077,1077&ava=2" alt="" /> </div> </main> </div> <script src="https://unpkg.com/@barba/core"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Flip.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js"></script> <script src="index.js"></script> </body> </html> cases.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="styles.css" /> <title>Static Template</title> </head> <body> <div data-barba="wrapper"> <main data-barba="container" data-barba-namespace="cases"> <a href="index.html">Home</a> <div> <img data-flip-id="img" class="bgimage_block" src="https://sun6-22.userapi.com/s/v1/ig2/awq7qUcGZAS-9dsYLrQoqJHwj9fpjNo6pi0DdawtulIcSqr6fqicNesTWXdtTwzynhR9S1oHx8G5gUyZMvOeJ12P.jpg?size=400x0&quality=96&crop=1,136,1077,1077&ava=2" alt="" /> </div> </main> </div> <script src="https://unpkg.com/@barba/core"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Flip.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js"></script> <script src="index.js"></script> </body> </html> You're probably going to like dynamically adding a data-flip-id attribute on click. myElement.setAttribute("data-flip-id", "img");

Hi all, I'm building a site that uses Barba.js to handle the page transitions. All is going well but I'm running into a small issue with my navigation timeline that only works on first page load. After I navigate to another page the barba transitions fire and the new page loads, but my timeline seems to stop working after that. I've included the important parts of the code I use, I suspect I need to set the reversed state of the timeline somewhere inside the Barba function, but after trying different approaches I still haven't found the solution. Update: reworked the Barba code based on their v2 version. All help is appreciated!

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

I'm having a problem and i'm unsure as to whether it's either with Barba or Gsap ScrollTrigger itself I have no clue . So in my website , when I go from the homepage to the about page everything works as normal except the horizontal scroll part that I have put in (Facts Section) , thing is I do this very same action on mobile and it works perfectly sometimes and then other times it does the same as it does with the Desktop Version , so it's either my code and the way I have implemented the horizontal scroll but thing is when I go directly to the page as in not through the homepage and just initiate all the functions in about.js independently , everything including the horizontal scroll works as desired and perfectly , so I don't know which is causing the problem , could ye have a look maybe ?? So here is my homepage.js (Barba Init code) //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); // }) and here's my 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, }), 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 the website homepage - https://adamoceallaigh.netlify.app/ Here's the about page - https://adamoceallaigh.netlify.app/about.html Appreciate all the help ye can give , if ye can , can ye check both mobile and desktop versions. ? Cheers Adam

Hi there, okay so thank you @ZachSaucier for your advice on what to do next with my situation. So I've made a little test , minimal and I think complete which shows the difference in the reaction of scrollTrigger with and without BarbaJS enabled on the page. So I have a homepage which has horizontal scroll perfectly available and working then I include a button to click the about page , click the button and brought to the about page (same animation but doesn't give you the same result) only able to scroll halfway across and not able to reach the footer. Wondering why this is the case and what can I do to combat the differences in the adjustment of the dimensions of the page made by Barba. Here's the site - https://testbarba.netlify.app/ Here's the code - index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js"></script> <script defer src="main.js"></script> <title>Document</title> </head> <body> <div class="container"> <div class="page one">One</div> <div class="page two">Two</div> <div class="page three">Three</div> </div> <div class="about_btn_container"> <a href="about.html">About</a> </div> <footer> All Rights Reserved &copy; Adamoc 2020 </footer> </body> </html> about.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js"></script> <script defer src="https://unpkg.com/@barba/core"></script> <script defer src="main.js"></script> <title>Document</title> </head> <body data-barba="wrapper"> <div class="container" data-barba="container" data-barba-namespace="about"> <div class="page one">One</div> <div class="page two">Two</div> <div class="page three">Three</div> </div> <div class="about_btn_container"> <a href="about.html">About</a> </div> <footer> All Rights Reserved &copy; Adamoc 2020 </footer> </body> </html> main.js const scrollAnimation = () => { let pages = [...document.querySelectorAll('.page')] gsap.to(pages, { xPercent: -100 * (pages.length - 1), ease: "none", scrollTrigger: { trigger: ".container", pin: true, markers: true, scrub: 1, snap: 1 / (pages.length - 1), // base vertical scrolling on how wide the container is so it feels more natural. end: () => "+=" + document.querySelector(".container").offsetWidth } }); } scrollAnimation() barba.init({ sync: true, transitions: [{ name: 'transition-base', async leave() { const done = this.async(); await delay(1000); done(); }, async enter() { window.scrollTo(0, 0); }, }], views: [ { namespace: 'about', beforeEnter(data) { }, afterEnter() { scrollAnimation(); }, } ], }); Cheers Adam

Hey Adam. This is 100% a Barba.js question, not at all related to GSAP. So don't expect to get this level of help next time if you're asking about Barba.js issues But this time I'm happy to help. The code that you provided is close to a minimal and complete demo. But there are a few things that I had to do to get it working: Load Barba.js. Find the styles file that is on your live version (you didn't provide it in the post above). You don't have the data attributes that Barba uses in the index.html page. So I had to add those. In general you should include your script tags in the bottom of your document right before the closing </body> tag. Once I got all of that working, it throws an error saying delay is not defined. So I had to define a delay function that returns a promise that resolves after the given number of milliseconds. Additionally the live version that you have errors out as well (check the console to see). When creating demos, please make sure that we will have everything that we need to recreate the issue with as little effort as possible (you're much more likely to get more and faster responses that way ). Now, onto the actual issue here: The main issue is that enter() runs before the page is fully loaded. To fix it, I recommend using a setTimeout (or requestAnimationFrame) to delay the scrollAnimation function call a little bit. Here's what works for me: Index: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body data-barba="wrapper"> <div data-barba="container" data-barba-namespace="index"> <div class="container"> <div class="page one">One</div> <div class="page two">Two</div> <div class="page three">Three</div> </div> <div class="about_btn_container"> <a href="about.html">About</a> </div> </div> <footer> All Rights Reserved &copy; Adamoc 2020 </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@barba/core@2.9.7/dist/barba.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js"></script> <script defer src="main.js"></script> </body> </html> About: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body data-barba="wrapper"> <div data-barba="container" data-barba-namespace="index"> <div class="container"> <div class="page one">One</div> <div class="page two">Two</div> <div class="page three">Three</div> </div> <div class="about_btn_container"> <a href="index.html">Index</a> </div> </div> <footer> All Rights Reserved &copy; Adamoc 2020 </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@barba/core@2.9.7/dist/barba.umd.min.js"></script> <script defer src="main.js"></script> </body> </html> Main.js: let myAnim; const scrollAnimation = () => { const pages = [...document.querySelectorAll('.page')]; const container = document.querySelector(".container"); myAnim = gsap.to(pages, { xPercent: -100 * (pages.length - 1), ease: "none", scrollTrigger: { trigger: container, pin: true, scrub: 1, snap: 1 / (pages.length - 1), // base vertical scrolling on how wide the container is so it feels more natural. end: () => "+=" + container.offsetWidth } }); } function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } if(typeof myAnim === "undefined") { scrollAnimation(); } barba.init({ sync: true, transitions: [{ name: 'transition-base', async leave() { const done = this.async(); await delay(1000); done(); }, async enter() { document.documentElement.scrollTop = 0; setTimeout(scrollAnimation, 10); }, }], });

Yes ... just like you have to remove e.g. any eventListeners you created, you should defnitely do that - not only to make sure everything will run as expected, but also because you may be creating serious memory leaks if you don't and things pile up. This here is just a very basic example logging out a number - not that it gets dangerously close to crashing your computer or something - but just imagine things piling up like that with many more ScrollTriggers on a page and some of them doing some complex stuff onUpdate e.g. https://codesandbox.io/s/h59k6h?file=/src/index.js It does make sense, but I think it also sort of depends. I tinkered around with barba in combination with scroll-smoother myself a bit in the meantime and I had my barba-container wrapped by the smooth-content and smooth-wrapper just like you have, when doing so. I actually got to (only) recalculate the scroll height just fine by calling a ScrollTrigger.refresh() after a transition - which does not appear do to the trick alone in your example - not sure why though, maybe I just missed something in a hurry here. But creating a new ScrollSmoother is something I would definitely recommend anyway though, because if you e.g. use ScrollSmoother's built-in effects, it will probably not know about the new elements on the page (but still target the old elements that aren't there anymore) if you don't - at least I couldn't get it to work after a transition, if I didn't re-create ScrollSmoother on the new page after the transition but solely called a refresh. I would also suggest specifically killing the old ScrollSmoother instance as well when you leave a page - it looks like there will be only one instance on the page anyway, because ScrollSmoother probably is clever enough to manage itself there when another instance is created, but it shouldn't hurt to kill it and doing so might prevent possible problems you may run into later on - and it could become tricky to find what's causing them then. FYI - both hooks you use for the creation of ScrollSmoother fire on first page load - so technically there isn't actually the need to also put the creation it in the once hook. Which hooks fire when is something you should consider diving deeper into when using barba, as it might also create problems at some point if you call something multiple times that is supposed to be fired explicitely only once e.g. Another barba "thing" is that the current and next container will be in the DOM for a certain amount of time during the transition lifecycle, so if you create new ScrollTriggers while that is the case, they will/might not have their starts and ends where you would expect them to be. So if you don't use synced transitions with barba, it would be best to manually remove the current container at a point when it's safe to do so - before creating STs. And now in hindsight, I realize that this is also the reason, why I couldn't get to recalculate the scroll height properly with a simple refresh call as mentioned before - because earlier I had forgotten to do that ?‍♂️ I'll stop right here, because these are the GSAP forums after all - but those should also be the most relevant points - I hope this will help a bit.

Hello folks, I was using the library Locomotive-Scroll with Barba js and Scrolltrigger proxy. But I saw the latest release of GSAP and it seems that the new ScrollSmoother plugin can correct a lot of problem I have (especially on safari IOS because Locomotive can't handle smooth : true for mobile). Unfortunately, I am struggling making things work. I set the following structure in my HTML : <body data-barba="wrapper"> <div id="smooth-wrapper"> <!-- fix content (not reinjected by barba) --> <main id="smooth-content"> <!-- I tried to invert smooth-content with barba container bu it results the same --> <div data-barba="container" data-barba-namespace="home"> </div> </main> </div> <script type="module" src="./js/main.js"></script> <!-- script where I create instance for ScrollSmoother --> </body> I have this error message : Invalid property – "overscrollBehavior" – "set to" – "none" – "Missing plugin? gsap.registerPlugin()" at load and the browser is lagging a lot. I didn't set CSS Plugin in my main.js (I tried) but I still have the issue. In the Main JS file I set: import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import SplitText from "gsap/SplitText"; import ScrollSmoother from "gsap/ScrollSmoother"; import ScrollToPlugin from "gsap/ScrollToPlugin"; gsap.registerPlugin(ScrollTrigger, SplitText, ScrollSmoother, ScrollToPlugin); If you have an idea, I would be super happy. And thank you in advance !!

Hello @Vineeth Achari position: sticky won't work with smooth-scrolling on elements inside the container that gets the transforms for the smooth-scroll applied - but you also don't seem to use it in your code. The reason your ScrollTriggers are not working is because you create them before you set up loco scroll and before you set up the scrollerProxy etc. You can check by trying to log out the loco-scroll instance in different places, e.g. - when you create the ScrollTriggers it returns undefined which means it wasn't created yet. https://codepen.io/akapowl/pen/BaYXegL If you want things to work with loco-scroll, you will have to make sure to stick to the order of things being created, as it is to be seen in the loco-scroll example in the .scrollerProxy() docs. And since you are also trying to use barba, you will have to be extra careful about when to call what, because you will have to adapt to barba's lifecycle. Giving you advice about how to handle barba is way out of scope for these free GSAP support forums though - especially if your code has several hundreds of lines to parse through to begin with. It will take quite a bit of re-consideration for how and when to create/fire things, which we just can not offer to do for you. If you need help getting all those to properly work together, you can find lots of helpful links on barba's website. https://barba.js.org/docs/getstarted/useful-links/#Developer Good luck with the project and happy tweening!

function init(){ const loader = document.querySelector('.loader'); // reset position of the loading screen gsap.set(loader, { scaleX: 0, rotation: 0, xPercent: -5, yPercent: -50, transformOrigin: 'left center', autoAlpha: 1 }); function loaderIn() { // GSAP tween to strech the loading screen across the whole screen return gsap.fromTo(loader, { rotation: 0, scaleX: 0, xPercent: -5 }, { duration: 0.5, xPercent: 0, scaleX: 1, rotation: 0, ease: 'Power4.inOut', transformOrigin: 'left center' }); } function loaderAway() { // GSAP tween to hide loading screen return gsap.to(loader, { duration: 0.5, scaleX: 0, xPercent: 0, rotation: 0, transformOrigin: 'right center', ease: 'Power4.inOut' }); } // do something before the transition starts barba.hooks.before(() => { document.querySelector('html').classList.add('is-transitioning'); barba.wrapper.classList.add('is-animating'); }); // do something after the transition finishes barba.hooks.after(() => { document.querySelector('html').classList.remove('is-transitioning'); barba.wrapper.classList.remove('is-animating'); ga('set', 'page', window.location.pathname); ga('send', 'pageview'); }); // scroll to the top of the page barba.hooks.enter(() => { window.scrollTo(0, 0); }); barba.init({ transitions: [{ async leave() { await loaderIn(); }, enter() { loaderAway(); } }] }) } window.addEventListener('load', function(){ init(); });

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