Search the Community

Hi, everyone! I am new to gsap. I am trying to get my scrollTrigger animation to work with gsap. Take a look at my demo: https://codepen.io/Ollymolly/project/editor/AOxzmn I have everything working fine except one. As you will see in the code, I am trying to put a scale animation on the headline. I put it all right, but nothing works. And I got the idea that I didn't connect scrollProxy correctly. Any ideas how to fix it? I have a great barba js with smoothScroll. But somehow scrollTrigger.... does not work with them.

Hey jackew and welcome to the GreenSock forums. Given that site uses GSAP for its animation I'd say it's quite doable with GSAP With that being said there are multiple aspects to that transition: A tool like Barba or Swup to transition between pages. A clip-path animation to hide content inside of the container. Translations on all the content in the viewport to animate it in as well. Creating something like this requires building each piece and combining it all together. There's no one plugin that you can throw in there to do it all for you

thank you so much! yes, i just signed up for your free gsap and barba js course, i am taking it with great pleasure! thank you!

Hey GeS. @Ihatetomatoes made some useful articles about GSAP + Barba that you should check out. The core issue here is that you are not recreating/updating the relevant ScrollTrigger and smooth scroll stuff when the new page loads. Unfortunately we don't have the capacity to fix all of the issues for you though. Some pointers related to your tweens though: tl.to(".blue", { // ... left: "-100%", ease: "Expo.easeInOut", }); It's best to use translations instead of left/right/etc. So x: "-100%". But if you have that, it's better to use xPercent. "Expo.easeInOut" is an invalid ease. You're mixing the old and the new syntax. It should just be "expo.inOut". Read more about those and other mistakes in the most common GSAP mistakes article.

Zach you totally nailed it! Switched those two statements around and everything works fine. Thank you so much for taking the time to help...I figured this wasn't a Greensock issue but it's sooo hard to not post on here when the support is always so good!! Barba does have a Slack channel but who wants to live like that?!

Hey mulegoat. It's hard to debug larger projects like this. I think these statements should be switched in order for one: // Bad initSmoothScroll(data.next.container); scroll.destroy(); // Good scroll.destroy(); initSmoothScroll(data.next.container); I'm also not sure if you need this: // reinit locomotive scroll scroll.init(); Overall questions like these are not really focused on GSAP so we can't spend our time helping out too much. It might be better suited for a site like StackOverflow. If only Barba had a good forum for it...

I also have a question relating to this. I'll post it here BUT do let me know if I should move this to a new thread @ZachSaucier @GreenSock I am also using barba.js with scrollTrigger and when transitioning to pages it's getting a bit mixed up and now working like it does on page load. I have a function for this that I am refiring when the new page comes in. navReveal: function() { let $elems = document.querySelectorAll('nav.main, a.logo__main'), $trigger; console.log('test 1'); if (ScrollTrigger.getById('nav')) ScrollTrigger.getById('nav').kill(); if (dev.ui.body.classList.contains('home')) { $trigger = document.querySelector('div.home__content'); } else { $trigger = dev.ui.body; } gsap.fromTo($elems, { opacity: 0 }, { opacity: 1, ease: 'none', scrollTrigger: { id: 'nav', trigger: $trigger, start: '0 center', end: '+=100px', scrub: true, markers: true, onUpdate: self => console.log('progress: ', self.progress) } }); } The issue seems to be that when I transition from page to page the trigger position is lost (as is moving about per page). The markers remain in tact but that's okay as they don't remove when you kill the scrollTrigger instance. SO. I'm wondering if from looking at the code if everything looks ok and I'm not doing anything stupid? The idea is that if the instance has already been created, then kill it, and then when it gets to the gsap.fromTo part it should be creating it (again).

Hey Zach, Many thanks for your quick reply and confirmation! Yes, that makes perfect sense. I thought that was the case after reading through the docs, but just wanted to make sure. I'd not used GSAP until about two weeks ago and have been playing about in CodePen and, really, it's a must-have for me. I had tried to mess with css transitions before but found them rather laborious, but GSAP puts the fun back into the dev I'm sure I will be asking some coding questions in the next few weeks as I try to get my head round everything. I'm going to be using it alongside barba.js, and I seem to remember reading on one of the posts that you were doing a demo of this as part of the learning section. Is that still on the cards ? Many thanks again!

Hey rootx86. It's impossible for us to tell what's going on given the information that you've provided. It's almost guaranteed to be an issue with your setup, not anything with GSAP. Unfortunately we don't have the capacity to debug every Barba project that uses GSAP. If you have a question specific to GSAP please ask and we'll do our best to help!

Hey rubegoldberg and welcome to the GreenSock forums. Thanks for the surprisingly minimal demo! Thank you for not including Barba and your whole setup The issue is that you can't have ScrollTriggers with duplicate IDs. IDs should be unique and you can't select multiple ScrollTriggers that share an ID for some reason using .getById() (it only returns one in that case). But if you're going to kill all of the ScrollTriggers, just use ScrollTrigger.getAll().forEach(st => st.kill()); https://codepen.io/GreenSock/pen/abNmwKm?editors=0010

Would React users need Barba.js though when they can instead use React Router ? https://www.google.com/search?q=react+gsap+page+transitions

Hey Vinu and welcome to the GreenSock forums. To do that sort of transition you will need to use the FLIP animation technique along with something that transitions between your page's content (like Barba.js). GSAP has a handy FLIP helper function to help with it. I am actually creating a tutorial on doing this effect right now. If you can hold out a week or so it should be on our learning section. You can follow it to receive updates

Hi, Can someone help please!!!! I am currently having an issue with Barba + GSAP on page transition. It work fine on the first page, when clicking on different link the scrollTrigger doesn't work... it load the animation before scrolling to the viewport. I've tried to Reset & Kill -> contentTl.kill(true) but it didn't work. Thank you. That's the link for codepen -> https://codepen.io/william_bella/project/editor/AxLLKq

Hi this is my website http://gallarii.appycodes.com/portfolio I wan to built the effect like this example site: https://antoni.de/cases/ When user clicks on the thumb image the image must scale to full page and then load new page can you give me hint how to proceed. My js file : http://gallarii.appycodes.com/wp-content/themes/generatepress/bbc-working.js?ver=4.9.8 var PortFolioTransition = Barba.BaseTransition.extend({ start: function() { this.originalThumb = lastElementClicked; Promise .all([this.newContainerLoading, this.enlargeThumb()]) .then(this.showNewPage.bind(this)); }, enlargeThumb: function() { var deferred = Barba.Utils.deferred(); var thumbPosition = this.originalThumb.getBoundingClientRect(); // this.cloneThumb = this.originalThumb.cloneNode(true); // this.cloneThumb.style.position = 'absolute'; // this.cloneThumb.style.top = thumbPosition.top + 'px'; // this.oldContainer.appendChild(this.cloneThumb); var image = $(this.originalThumb).find("img"); var tl = new TimelineLite({onComplete:deferred.resolve()}); tl .timeScale(0.2) .set(image , { autoAlpha: 1, "z-index":"9999999" }) .fromTo(image,1, { scale: 1, }, { scale:5, top:0 }) return deferred.promise; }, showNewPage: function() { var TTLite = new TimelineLite({ onCompleteScope: this, onComplete: function() { this.done() , afterDomReloaded() } }); TTLite.set([this.oldContainer, this.newContainer], { position: "absolute", top: 0, left: 0, width: "100%" }).set(this.oldContainer, { autoAlpha: 0 }).set(this.newContainer, { autoAlpha: 1 }).set(this.newContainer, { clearProps: "position, top, left, width" }) } }); Please help me if , Thanks or give me some info how to start

Thank you. I received an answer on Barba github, there is an option to prevent clicks during the transition preventRunning. Somehow it solves my problem! I wouldn't know how to make a Codepen demo, it's a fiddly setup in Wordpress.

Hi @ZachSaucier , nope I'm not using the markers but the markers are indicating from what i gather anyway where the animation starts so getting them in the right position is key and then turn them off . So I was just using them as a guide really , oh hahahah I found a workaround so but I'll try that either if I run into this very problem again hahaha . No I completely understand the honus is not on you as that is not your problem really , if i ever run into Barba problem again , do you have any forums I could use ? Thanks a million for your help over last few days , think I'll just about be able to launch it in large part thanks to you . Youre a sound man , see ya again i imagine lol 👌😂 Cheers Adam

Well I tried to add a timeout but it didn't change anything... even with a giant timeout, nothing happens... As you can see markers are appearing on top of page even if i put like 10 sec timeout : Sorry to bother you with my barba.js problems....

I just answered another question about Barba.js: The main issue there was that the content had not been fully loaded before recreating the ScrollTrigger. Adding a simple setTimeout for the function that created the ScrollTrigger fixed the issue. Please try doing the same thing in your project

Okay , thank you sm @mdelp, I followed all the steps you suggested and the website is running a lot smoother now. Followed all those cutting down on code steps and cut down my JS code into one file called main.js as suggested by you and @Yannis Yannakopoulos. This works a lot better than multiple JS files , so thank you . I've fixed my actual problem it was Barba acting up so just had to reclare variables on a beforeEnter hook to the next container . Now I'm just having a minor issue with pinning and using horizontal scrollTrigger . My aim is to scroll until the .factsContainer , create a timeline like i've done before , then have the heading fade in and then scroll little more and pin the .factsContainer_sm container containing the facts , then create a smooth snapping horizontal scroll for the offsetWidth of that container , then unpin and continue . I have created a codepen of what I want and copied the code directly into my actual website as is and it's not working as desired , just wondering could anyone help me please. main.js 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" }) gsap.to(facts, { xPercent: -85 * (facts.length - 1), scrollTrigger: { trigger: ".factsContainer_sm", start: "center center", end: `+=${factsContainer_sm.offsetWidth}`, // 414 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}` } }); } Codepen - https://codepen.io/Adamoc/pen/RwrgyRv Website - https://adamoceallaigh.netlify.app/about.html but to get extent of what i'm working with you have to go https://adamoceallaigh.netlify.app/index.html and click 'About' Cheers Adam

Like this: 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 init = () => { 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')) } barba.hooks.afterEnter(() => { logo_tl_func() init() hamburger_display_button.onclick = () => { opened_nav_buttons.classList.toggle('open') }; }); ??

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.

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?

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