mdelp

Yea that should do the trick, unless you would advise against it and just keep it running on mobile too?

Hi all, As I understand it from the docs, ScrollSmoother does not apply smooth scrolling to touch devices, but does apply the effects like data-lag and data-speed? Is there a way to disable these effects on touch devices too? Or is the best way to do this to just kill the scrollsmoother at a certain breakpoint?

@StudioProjects, I made a simple Codesandbox you could use as a starting point to integrate Barba, see https://codesandbox.io/s/scrollsmoother-barba-js-3dwykz?file=/index.html:328-387. You technically only need a leave and enter animation and setup Barba correctly, you should be good to go in to time.

@akapowl, been a while but wanted to let you know that the original problem of the smooth scrolling to the top on each page transition was fixed by doing: window.scrollTo({ top: 0, left: 0, behavior: 'instant' }); Apparantly the instant was needed in my setup.

@akapowl thanks for your insights, much appreciated! I'm going to test a few more things, but I understand the workings of ScrollTrigger and ScrollSmoother a bit better now!

@akapowl, I got around to setting up a sandbox, see https://codesandbox.io/s/scrollsmoother-barba-js-3dwykz?file=/index.html:328-387. Really weird because I have it setup like my own project but somehow here it works, so something must be off in my own code. I do have some questions though while we're at it. What's happening is I have a small smootherInit function that runs the first browser load (barba.once) and then on every page transition again (barba.afterEnter). I have to rerun it on every page transition because it needs to recalculate the height of the page, does that make sense? Also, is it necessary to kill all scrolltriggers every time I transition to a new page? Does this have some kind of impact on performance? If you see some major flaws in the code feel free to correct me!

Hi @akapowl! I'll have a look at the Stackblitz link, smoother.scrollTo() doesn't do the trick for now!

Hi All, I'm integrating ScrollSmoother in my new website and am using Barba.js to handle the page transitions. Everything seems to be working, just one little thing where I'm stuck. A Codepen is a little tricky because there's alot going on, but I'll try to explain. Since Barba doesn't use page refreshes the ScrollSmoother is not created each page but instead uses the instance of the first load. So I need to create a ScrollSmoother every new page transition, which is OK, but after every page enter I need to scroll to the top and this needs to be instant, otherwise it uses the scroll position of the previous page. What happens now is that the page transition fires, but then the window.scrollTo() is a smooth while it needs to be instant. I tried to .kill() the ScrollSmoother every page leave, but since the ScrollSmoother is created in a Barba hook each time I can't access the variable. Maybe I'm missing something or making it too complicated? Any help would be appreciated! Edit: you can see whats happening on https://dev.mathieudelporte.be/md/. Scroll to the footer and click on 'Over mij', you'll see the transition and the scroll to top happening this way.

Thanks for the feedback Zach! I was able to get it working perfectly with GSAP and Barba hooks but ended up using a different approach.

Hi all, I'm looking to build a fairly simple slider but lack the knowledge to do so, hope someone can point me in the right direction. I have a slider that contains 3 images, and when the page loads I want one of those images (random) to show. Then I want to bind an event (will be a Barba page transition, but could be a button too), that fades out the current image that is showing and fades in another random image. Everytime the event is triggered, the current slide has to fade out and a random other one has to fade in. Is this possible with gsap?

@adamoc when working with Barba there are a few things you have to get right in order to have everything working. Maybe it's best to double check everything below: All the main elements that do not have to be reloaded each transition have to be inside the Barba wrapper, but not inside the Barba container. This means all your stylesheets, JS files, things that do not change like the header, footer, ... Everything else goes inside the Barba container, i.e. the content that gets replaced everytime. In my case I have one stylesheet and one JS file, which are just compiled assets from multiple files. If I were you, I'd load all the JS file at the bottom of the file, just before the closing body tag. All functions that have to run everytime need to be reinitialised in a Barba hook, which is probably almost all of them. How I work is I write all animations and other functionality in seperate functions. Since I use WordPress the first thing I do when the site loads is init all those functions in a document ready, so in the Barba case, this means all functions have been initialised for all pages. Then I make sure that functions that need to be reinitialised every transition are included in the 'barba.hooks.afterEnter'. My barbaInit() function gets called on document.ready, together with all my other functions. Those anim_about_in() are functions containing GSAP animations for the page in animations, so they only fire when entering a specific namespace. You can init all your animations on the first Barba load to make sure if someone goes directly to the about page they see the animations, or do a conditional check with something like a .first-load class on the body to make sure all animations work both with and without a Barba transition. For the stylesheet, you need to load all stylesheets because they are outside the Barba container and will not be replaced. Same goes for all other assets. Since all assets are loaded on the first load and don't have to be reloaded every page transition you have to include them all (not just on the homepage in case someone goes directly to another page). What I do is concatenate all sass into one css file and js into one file, and then have a preloader on the first load for when the assets are loading. Hope this helps!

@adamoc I'll just dump my Barba code here, maybe it can be of use to anyone. Please note that I'm not using ES6 syntax, so I've used slightly other syntax than the Barba docs. function barbaInit() { barba.hooks.afterLeave(function() { $('.c-slider__slides').slick('unslick'); $('.c-slider-large__slides').slick('unslick'); $('.c-slider-multiple__slides').slick('unslick'); }); barba.hooks.beforeEnter(function() { lazyloadInstance.update(); }); barba.hooks.afterEnter(function() { scrollItems(); smoothScroll(); rotator(); sliderProjects(); sliderLarge(); sliderMultiple(); }); barba.hooks.after(function() { ga('set', 'page', window.location.pathname); ga('send', 'pageview'); }); barba.init({ transitions: [{ name: 'transition-base', preventRunning: true, timeout: 5000, // default: 2000 leave: function() { var done = this.async(); if( $('.c-hamburger').hasClass('is-active') ) { $('.r-header, .hamburger, .c-hamburger').removeClass('is-active'); gsap.to('.overlay', {left: 0, duration: 0.75, ease: 'cubicbezier', onComplete: done}); } else { gsap.to('.overlay', {left: 0, duration: 0.75, ease: 'cubicbezier', onComplete: done}); } }, enter: function(data) { var done = this.async(); // Rewind the navigation overlay to start tl_nav_master.pause(0); // Scroll out the transition overlay gsap.to('.overlay', {left: '100%', duration: 0.75, delay: 0.25, ease: 'cubicbezier', clearProps: 'all'}); // Scroll the viewport back to the top before page transition $(window).scrollTop(0); done(); }, }], views: [{ namespace: 'home', afterEnter() { anim_home_in(); }, }, { namespace: 'project', afterEnter() { anim_project_in(); }, }, { namespace: 'about', afterEnter() { anim_about_in(); }, }, { namespace: 'services', afterEnter() { anim_services_in(); }, }, { namespace: 'service', afterEnter() { anim_service_in(); }, }], }); } The global hooks at the top are hooks that need to fire every page transition. Then I have a base transition between all pages. And finally I have views that contain the animation that specifically need to run when a page enters the namespace with data-barba-namespace="home".

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 guys, first of all big thanks for the recent ScrollTrigger plugin, which came at the perfect moment for my new project! I was just wondering 2 things: Is it possible to set a trigger to a timeline, and then stagger all the elements in the viewport that use the timeline? For example, I have 4 columns with a usp, can I fire a timeline for each usp and stagger them between? As a second question, is it possible to set the viewport as a trigger, not a specific setion or other element? Let's say I have a component that is used 3 times on a page, if I set a trigger for the component then all 3 will animate on the page, even though the other 2 are not yet inside the viewport. Is there a way to approach this?

@akapowl thanks for the feedback, that makes sense! @ZachSaucier thanks for the help again! Time to dig deeper in both Barba and GSAP now.