mdelp

Thanks everybody for the feedback, will dive deeper into all your suggestions!

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!

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!

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!

Thanks for the tip, but I've been using WordPress for a few years now and been using ACF Pro on all my websites. It's an amazing plugin and I couldn't build WP website without it!

Thanks again for the feedback! I'm going to try out both Animsition and BarbaJS and see where I end up. The initial idea was just to have an out transition, then a white screen with loader and an in transition which I managed to do with Animsation. Barba.js does look interesting indeed if I can make it work with WP. I'm not keen on the one-page idea as the website contains alot of different pages and projects. I'll keep you posted on the progress though if I come up with a solution! Thanks!

Small status update, I was able to hook into the Animsition functions and do the animations with pure CSS, but unable to do it with TweenMax. Basically I want to use this $(window).on('animsition.inStart', function(){ TweenMax.to(".overlay", 1.2, {y:'-100%', ease:Power4.easeInOut}); }) instead of doing this $(window).on('animsition.inStart', function(){ $('.overlay').addClass('animin'); }) So now I'm adding a class to my overlays which have CSS transitions, but I want to use the GSAP animations. Problem is that the GSAP animations don't seem to work inside the animsation.inStart function, it ignores it. The functionality is now working, but I would like to use the GSAP animations instead of pure CSS, unless that seems like a silly thing to do at this point. Thanks!

Thank you both for the replies, seems like it's a bit harder to achieve than I expected. I'd rather stay away from AJAX since I use WordPress as back-end to my websites, so I don't want to run into trouble there. One more question before I start scouring the web even more, but Animsition (http://git.blivesta.com/animsition/ ) achieves page loading and effects using only jQuery, do you think I can hook into some of those functions using GSAP and extend the animations? Their base plugin is actually what I'm looking for, I just need to adjust the animations itself. Tanks!

Hi Dipscom, Thank you for your reply! I managed to code the animations of both the page out and page in using TweenMax which is working perfect. Do you happen to know a library that could help me handle the loading state in combination with GSAP? Thanks!

Hi everyone, I'm very new to GSAP and have little JS experience, but I'm rebuilding my portfolio and would like to implement something that seems very easy but I can't find anything on how to implement this properly. Basically what I want to do is trigger an animation when someone leaves the page (clicks a link), show a loading screen while the new page loads and when the page is loaded show an inverted animation. It's an overlay of the viewport that I want to animate. First of, is TweenMax suited to be used this way? And can this be achieved without using AJAX, so that it just fires on page leave, shows the loader en inverts the animation when the page is loaded? Animsition offers almost what I need with their overlay transition, but I need multiple layers of the overlay so was looking into TweenMax to achieve this. Hope someone can help me! Thanks!