Search the Community

Hi there , I have read this thread as I have come back into this problem too . My problem is before transitioning the timeline loads perfectly and executes as i want however after transitioning to another page and then clicking back to the home screen the timeline doesn't play half the tweens specifically the part animating my logo. I believe after reading the thread it might come down to the fact as @mdelp has implied that elements targeted with a timeline inside the barba container are removed or replaced but I have no clue how to go about fixing this problem as i need all this content withing barba container. Here's a link to my website where you will find the problem occuring if you follow the steps outlined above -> Move to different page and then back to homepage again - https://adamoceallaigh.netlify.app/ Cheers, Adam

I may be completely wrong (someone correct me) but does Barba.js work correctly in regular Codepens I can't recall seeing it? Try instead using a Codepen Project that will work better for this sort of thing. I believe that is the issue you are encountering and nothing related to GSAP itself.

I create barba.js page transition whith GSAP animation, barba.js is working but gsap animation is not working, when i change the href path location like href="./html/service.html" to href="service.html" its working fine <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="./html/servics.html">Services</a></li> </ul> </nav>

Hey Sanjana and welcome to the GreenSock forums! This sort of thing likely is more complicated than what you think. Optimally you wouldn't even need a loading screen, you could just fade out the previous page's content and transition in the new content. But if you do need a loading screen, you likely want to use something like Barba.js to help you detect when the new content is loaded. With that being said, if you don't want to wait for the entire timelines to reverse you can move the playhead to the beginning immediately instead. A good way to do that is to use .pause(0). https://codepen.io/GreenSock/pen/zYrrGJX?editors=0010 Some side notes: You had some pointless .delays that I removed. It's best to use the position parameter instead of delay when you're using timelines. It's good to use functions to make your code more DRY (don't repeat yourself). I write more about doing that in my article on animating efficiently. In GSAP 3 we recommend that you put the duration in the vars parameter so that you can use defaults. You don't need yoyo: true on all of your timelines.

Thanks a lot @Yannis Yannakopoulos. Your answer really helps as it confirms my assumption. I have now found the events the theme dispatches before and after the transitions (it's not barba js but gsap they're using btw) and I'm listening for transitionOutStart (here I want to kill ScrollTrigger and transitionsDone (here I'll have to initialize ScrollTrigger if used on that page). But I don't really know on how to use ScrollTrigger.kill() as it's not orking as expected. This is how I init ScrollTrigger: gsap.registerPlugin(ScrollTrigger); let tl = []; let projects = ['omrfestival', 'mini', 'porsche', 'boa', 'dinnerberlin']; for (i = 0; i < projects.length; i++) { let tl = gsap.timeline({ scrollTrigger: { trigger: ".portfolio--" + projects[i], start: "top 70%", end: "top 55%", } }); tl.addLabel("animateTitle") .fromTo(".portfolio--"+projects[i]+" .portfolio__heading", {opacity: 0, x: -50}, {opacity: 1, x: 0, duration: 0.8}) .addLabel("animatePlane") .fromTo(".portfolio--"+projects[i]+" .portfolio-img__plane", {opacity: 0, scaleX: 0, transformOrigin:'0% 0%', ease: "expo. out"}, {opacity: 1, scaleX: 1, duration: 0.5}, "-=0.3") .addLabel("animateImage") .fromTo(".portfolio--"+projects[i]+" .portfolio-img__image", {opacity: 0, x: -10}, {opacity: 1, x: 0, duration: 0.6}, "-=0.2") .addLabel("animateDesc") .fromTo(".portfolio--"+projects[i]+" .portfolio__desc", {opacity: 0, x: -10}, {opacity: 1, x: 0, duration: 0.6}, "-=0.2") .addLabel("animateCTA") .fromTo(".portfolio--"+projects[i]+" .portfolio__cta", {opacity: 0, x: -10}, {opacity: 1, x: 0, duration: 0.6}, "-=0.2"); } And here's the eventListener (function($) { function exitPage() { console.log("sempliceTransitionOutStart"); if (tl !== undefined) { tl.kill(); console.log("kill ScrollTrigger"); } } function transitionsDone() { console.log("sempliceTransitionsDone"); } window.addEventListener("sempliceTransitionOutStart", exitPage ); window.addEventListener("sempliceTransitionsDone", transitionsDone ); })(jQuery); In the console it show me that the kill section is beeing called but it doesn't destroy it as expected. I've tried both: tl.kill() and ScrollTrigger.kill(). None of them is working. What am I doing wrong? Thanks so much for the help! PS: I know that the code above can be optimized. I'm just strating to get into JS. I think utils.toArray() is what I'll have to look into next, right?

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

Hello, I made a simple page transition (block reveal) animation with GSAP and barba.js. The animation works fine, but I have a flickering effect because the new page loads before the "leave" animation is done. I don't know how to fix this ... maybe a JS wizard could help? I attached the file. Thanks, page transition.zip

CodePen projects aren't very forkable... So here's untested code function delay(n) { n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n); }); } function pageTransition() { var tl = gsap.timeline(); tl.fromTo(".loading-screen", {width: 0, left: 0}, { duration: 1, width: "100%", left: "100%", ease: "expo.inOut", delay: 0.3, }); tl.to("#svg-1", { duration: 1, opacity: 0, y: 30, stagger: 0.4, delay: 0.2, }); tl.to(".loading-screen", { duration: 1, width: "100%", left: "100%", ease: "expo.inOut", delay: 0.3, }); tl.set(".loading-screen", { left: "-100%", }); tl.set("#svg-1", { opacity: 1, y: 0 }); } function contentAnimation() { var tl = gsap.timeline(); tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 }); } $(function () { barba.init({ sync: true, transitions: [ { async leave(data) { const done = this.async(); pageTransition(); await delay(2000); done(); }, async enter(data) { contentAnimation(); }, async once(data) { contentAnimation(); }, }, ], }); }); I don't know if you can change the cursor with only JS... You can just set it in CSS: .loading-screen { cursor: progress; }

Thanks @ZachSaucier, fantastic. Could you show what I should change in this snippet and also how to not mixing ease formatting? function delay(n) { n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n); }); } function pageTransition() { var tl = gsap.timeline(); tl.to(".loading-screen", { duration: 1, width: "100%", left: "0%", ease: "Expo.easeInOut", }); tl.to("#svg-1", { duration: 1, opacity: 0, y: 30, stagger: 0.4, delay: 0.2, }); tl.to(".loading-screen", { duration: 1, width: "100%", left: "100%", ease: "Expo.easeInOut", delay: 0.3, }); tl.set(".loading-screen", { left: "-100%", }); tl.set("#svg-1", { opacity: 1, y: 0 }); } function contentAnimation() { var tl = gsap.timeline(); tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 }); } $(function () { barba.init({ sync: true, transitions: [ { async leave(data) { const done = this.async(); pageTransition(); await delay(2000); done(); }, async enter(data) { contentAnimation(); }, async once(data) { contentAnimation(); }, }, ], }); }); Would be very helpful

Search for threads related to Barba.js and GSAP like this one:

Hard to say what the issue was without seeing a demo that reproduces the error. My guess is that you're trying to use modules in an environment that doesn't support it. That's because you have the tweens inside of the function. Here's what's happening: You create the timeline. Since the timeline is not paused, it tries to play. Since there's nothing to play, it finished immediately. You then call the function. The function adds new tweens to the timeline. But the timeline is already done so it doesn't play them. What you should do instead is create the timeline with all of its tweens before the function call. Then inside of the function you use the .play() control method to play the timeline. Note that I also upgraded your code to GSAP 3 while I was at it. https://codepen.io/GreenSock/pen/QWjqWBM?editors=0010 If you want that to fire on click instead, you should prevent the default behavior of the click event and call that function. This is part of what Barba.js would do for you. Barba also loads the next page's context and updates the page history so that you can load new content without actually going to the other page(s). https://codepen.io/GreenSock/pen/WNQZNgO?editors=0010 I highly recommend that you give the GSAP Getting Started article a read as well as my article on tips to animate efficiently because it talks about using control methods.

Alright update: My main problem seems to be GSAP setup, I tried with a earlier project where I had succes with GSAP and the animation worked there after changing transformOrigin from "bottom left" to "left bottom". So now the animation works! Now I just either have to setup Barba.JS correctly or do what ZachSaucier suggested. If anyone can advocate why Barba.JS is a better solution or/and why my script from the video doesn't work, I would appreciate it very much!

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!

Hey itsmeagian and welcome to the GreenSock forums! It looks like you didn't follow the tutorial which uses Barba.js. Was that intentional? If you're not going to use Barba.js, you will need to handle the link clicking behavior yourself - preventing the default behavior of the link(s) and calling the animation yourself.

Hey everyone, I am trying to recreate this animation from this video about GSAP and Barba.JS: https://www.youtube.com/watch?v=aMucZErEdZg However, the lines do not show up and I get no errors in console, can anyone shed some light on the problem? My HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="styles.scss" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TimelineMax.min.js"></script> </head> <body data-barba="wrapper"> <ul class="transition"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <main data-barba="container" data-barba-namespace="home"> <h1>Hello World</h1> <a href="/index2.html">Test Link</a> </main> <script src="/testscript.js"></script> </body> </html> The CSS ul.transition { display: flex; position: absolute; z-index: 10; height: 100vh; width: 100%; top: 0; left: 0; margin: 0; pointer-events: none; } ul.transition li { transform: scaleY(0); background: yellow; width: 20%; } Javascript: let tl = new TimelineMax(); pageTransition(); function pageTransition() { 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"); }

@bootstrap007 Have a look at this post and linked thread example as reference (no need to bump either thread with comments by the way :--) You won't able to use Barba on Codepen like that. You need to have a Pro account and create a Project instead, or do it live on your own server.

Hi ZachSaucier Thanks for your time & support. I know about barba.js and the page transitions effects. You first need a way of keeping track of the position of the clicked on element. You could do that in various ways, but likely the best is to use some sort of data representation of the position state. -- Do you have any example for this please? My question was - If you click a portfolio item from the CENTER of the page then on the NEXT PAGE that item is animating exactly from the center of the screen/page( triggering the position value from the previous page) OR if you click a portfolio item from the left side of the page then on the next page it is starting the animation exactly from that left postion (same as in the previous page). This can be done in Gsap or with the help of Jquery only? Thanks Zack

Of course it is! You first need a way of keeping track of the position of the clicked on element. You could do that in various ways, but likely the best is to use some sort of data representation of the position state. Then you need to transition between pages using that information. You should look into Barba.js to help you with handling page transitions and potentially posts on how to use GSAP with Barba. That's it

Hi @jamaldols welcome to the GreenSock forums. This seems more like a Barba related question than GSAP. But have a look at this recent post and the linked CodePen project using GSAP 3 & Barba 2. https://greensock.com/forums/topic/22035-page-transition-with-gsap-and-barbajs/?do=findComment&comment=110399 Fork that and try building your desired result based upon that example, utilizing its a approach of leaveAnimation & enterAnimation to build your concept. Also you shouldn't need that helper.js delay function with the above approach.

I finally got a simple transition working with gsap 3 & barba V2! 🎉 The transition function that worked for me looks like this: function leaveAnimation(container) { return new Promise(async resolve => { await gsap .to(container, { duration: 1, opacity: 0, }) .then(); resolve(); }); } One really simple thing that took me a while to figure out was making the enter animation work. This was fixed by just adding css to make the barba container positioned absolute: .container { position: absolute; left: 0; top: 0; width: 100%; } I'm going to leave this working example here incase anyone else needs it to reference from.

Hey @ZachSaucier, really appreciate the quick response. The GSAP community is the bee's knees. Love it. I did make a post at Barba a few days ago so I'll wait to hear back from them. If I have any luck I'll post a working example here.

Hey @Cameron Knight and welcome to the GreenSock forums. Your question is more focused on Barba so you may not get a clear answer here. In your demo it looks like there are 406 errors for some reason. Not sure why.

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

Hi @Chriz welcome to the forum. I see you bumped another thread asking for examples. In case you were unaware the video series you posted above has a link to download the working files in the description (click "show more"). Please note however that the tutorial you referenced uses the older version of both GSAP and Barba. So if you are just getting started on your journey with each, then I would highly suggest using GSAP 3 and Barba v2.

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