Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

7 Newbie

About mdelp

  • Rank

Recent Profile Visitors

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

  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
  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(); sliderLarg
  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/ Functi
  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 t
  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 t
  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: rew
  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?