Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About mdelp

  • Rank

Recent Profile Visitors

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

  1. @akapowl thanks for the feedback, that makes sense! @ZachSaucier thanks for the help again! Time to dig deeper in both Barba and GSAP now.
  2. @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.
  3. 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!
  4. @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).
  5. @ZachSaucier I'm nearly there but I'll try to setup a Codepen next week with an example!
  6. 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 }); } }] });
  7. 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!
  8. 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!
  9. @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?
  10. @mikel see below https://codepen.io/mathieudelporte/pen/WNvNVLm What I'd like to achieve is when the word changes, instead of the words "of the page" jumping to the right or left, give it a transition so it has a smooth animation. I don't know if this makes things clear?
  11. @mikel is there a way to give an ease to the width change, e.g. if a word is longer than the previous, could you first animate the with change and then show the new word? I'm new to both JS and GSAP, so all help is much appreciated!
  12. Thanks everybody for the feedback, will dive deeper into all your suggestions!
  13. Hi all, I'm looking for some feedback to find out if I can use GSAP to build a specific animation, based on what Sendgrid does in their hero (https://sendgrid.com/). Basically I want to have multiple words inside a heading that change after x seconds and fire off some animations during each transition to a new word. I wonder if this is possible with GSAP, specifically how to make sure the width of each word is calculated and how this would scale from mobile up to desktop. I'm just starting out with GSAP so I'm still learning, any help or pointers are much appreciated!
  14. That didn't seem to get me any further, I think these kind of animations are still a bit out of my league. I'll get to studying some more JS and try to do this in the future. For now I'll go with the Animsition route which is working fine although the Barba way seems a bit more robust. Thanks for the help anyway, seems like a great community here!
  15. Hi guys, So I got things working perfectly now using Animsition and CSS animations but I notice some performance issues that slow down the animations from time to time. Since I'm very interested in Barba I started integrating this on a testsite but am a bit confused as to how I can integrate the Tweenmax functions. When I use the standard Barba fade transition it works flawless, but I can't seem to figure out how to change the standard fade transitions to the Tweenmax transitions. This is the standard Barba transition: var FadeTransition = Barba.BaseTransition.extend({ start: function() { /** * This function is automatically called as soon the Transition starts * this.newContainerLoading is a Promise for the loading of the new container * (Barba.js also comes with an handy Promise polyfill!) */ // As soon the loading is finished and the old page is faded out, let's fade the new page Promise .all([this.newContainerLoading, this.fadeOut()]) .then(this.fadeIn.bind(this)); }, fadeOut: function() { /** * this.oldContainer is the HTMLElement of the old Container */ return $(this.oldContainer).animate({ opacity: 0 }).promise(); }, fadeIn: function() { /** * this.newContainer is the HTMLElement of the new Container * At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden) * Please note, newContainer is available just after newContainerLoading is resolved! */ var _this = this; var $el = $(this.newContainer); $(this.oldContainer).hide(); $el.css({ visibility : 'visible', opacity : 0 }); $el.animate({ opacity: 1 }, 400, function() { /** * Do not forget to call .done() as soon your transition is finished! * .done() will automatically remove from the DOM the old Container */ _this.done(); }); } }); /** * Next step, you have to tell Barba to use the new Transition */ Barba.Pjax.getTransition = function() { /** * Here you can use your own logic! * For example you can use different Transition based on the current page or link... */ return FadeTransition; }; Now I want to integrate the following into the above for the fadeout of the page (when a link is clicked and the site goes to a new page, before the new page starts loading): TweenMax.to(".overlay-black", 1.2, {height:'100%', ease:Power4.easeInOut}); TweenMax.to(".overlay-yellow", 1.4, {height:'100%', ease:Power4.easeInOut}); TweenMax.to(".overlay-white", 1.6, {height:'100%', ease:Power4.easeInOut}); And for the fade-in after the new page has loaded TweenMax.to(".overlay-black", 1.6, {height:'0', ease:Power4.easeInOut}); TweenMax.to(".overlay-yellow", 1.4, {height:'0', ease:Power4.easeInOut}); TweenMax.to(".overlay-white", 1.2, {height:'0', ease:Power4.easeInOut}); Now the Tweenmax functions probably have to go in a timeline first? And after, any idea how I can integrate the functions into the Barba functions that handle the transitions? As you have noticed my JS is very basic and I still have a lot to learn (working on it), so it would be great if someone can help me out. Thanks!