Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

About mdelp

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

mdelp's Achievements

  1. 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.
  2. 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?
  3. @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!
  4. @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".
  5. 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.
  6. 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?
  7. @akapowl thanks for the feedback, that makes sense! @ZachSaucier thanks for the help again! Time to dig deeper in both Barba and GSAP now.
  8. @ZachSaucier my initial question in this thread was if there is a way to completely reset a timeline without reverse(); So inside the leave transition of Barba in the example I reverse the timeline, but is it possible to reset it in 0s? I tried doing tl_nav.invalidate(); but that doesn't seem to work.
  9. I've set up a quick example of my setup. Everything works and I don't need to reinit my scripts in this setup for some reason. Check https://dev.mathieudelporte.be/barba-js for my uncompiled code. It looks like the nav transition is a bit clunky though, not sure why the performance takes a hit there. I'll probably have to add a bunch of more checks and lines of code to make it bullet-proof, but if you guys could give a JS-noob some feedback it would be much appreciated!
  10. @akapowl I got everything working in my setup, even locally (both with the stable and beta release of GSAP). I'll see if I can bundle a base example of my setup after the weekend, I have a prototype online but don't want to throw all my code out there just now (new site).
  11. @ZachSaucier I'm nearly there but I'll try to setup a Codepen next week with an example!
  12. I figured out what the problem was in my setup, specifically why my timelines would only run on the first page load. Basically Barba doesn't reinit scripts after a page transition, so you have to load them inside a barba hook. So I just did this: barba.hooks.after(() => { $('.c-hamburger').on('click', function() { $('.c-hamburger, .hamburger, .r-header').toggleClass('is-active'); tl_overlay_in.reversed() ? tl_overlay_in.play() : tl_overlay_in.reverse(); }); }); So after every page transition this gets reinitialised and all runs perfect now. This actually applies to other JS (like a slider) as well. There might be a better way to do this, but I'll do some more homework later. I do have another question though, in the onComplete hook of my page out transition of Barba I'd like to reset a timeline to its starting values, in the starting state it would be on a page load. Is there a specific function for that? tl_overlay_in.invalidate().restart(); The code above doesn't seem to work, is there something that I can use? barba.init({ transitions: [{ name: 'transition-base', leave: function(data) { var done = this.async(); gsap.to('.overlay', {left: 0, duration: .5, ease: 'cubicbezier'}); // Somewhere here or in the onComplete I need to reset a specific timeline to its starting values gsap.to(data.current.container, 0.5, { opacity: 0, onComplete: done }); }, enter: function(data) { var done = this.async(); gsap.to('.overlay', {left: '100%', duration: .5, delay: .5, ease: 'cubicbezier', clearProps: 'all'}); gsap.from(data.next.container, 0.5, { opacity: 0, onComplete: done }); } }] });
  13. 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!
  14. Sorry my fault, I'm using RFS to scale down the font-sizes which doesn't play nice with the width calculation of the animation. I'll find a way to fix this, thanks for your help, it was really useful!
  15. @ZachSaucier thank you very much, that was super helpful and something new I learned. Just wondering now if there is a way to make sure the width calculation stays correct when the viewport is resized, maybe make sure to refresh everytime a resize was done or something?