Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by pauljamiekidd

  1. 3 minutes ago, Wizard of Oz said:

    Sigh! I too walked on this path of "I am new to JS but I am having problems using Barba + GSAP"


    My 2 cents! STOP! Don't start with JS+GSAP+Barba. Start instead with JS, understand it's simple concepts, arrays, objects, scope etc ( I am still learning this btw ) Then afterwards it will become MUCH MUCH easier solving problems which arise after integrating 3rd party libraries. 


    With nothing but love
    Fellow Newbie :)

    Agreed, my friend.. I am more than okay with front end development, but JS not so much... I will need to build on what basics I know... and hopefully the penny will drop haha

    • Haha 1
  2. Awesome! thanks for this... I am hoping I can  wade through your demo and tutorial @akapowl ... You're right about it getting complex quickly and I think I may be out of my depth on this... which is a shame as the transition really benefits the site I am working on, I just can't seem to get the transition effect over the line having spent too long on it already! haha *project creep* - maybe if I look at it with fresh eyes (with the aid of your input above) and I can finally get it done. Thanks to everyone who offered their help! @Cassie

    • Like 2
  3. function init(){
        const loader = document.querySelector('.loader');
        // reset position of the loading screen
        gsap.set(loader, {
            scaleX: 0, 
            rotation: 0, 
            xPercent: -5,
            yPercent: -50, 
            transformOrigin: 'left center', 
            autoAlpha: 1
        function loaderIn() {
            // GSAP tween to strech the loading screen across the whole screen
            return gsap.fromTo(loader, 
                    rotation: 0,
                    scaleX: 0,
                    xPercent: -5
                    duration: 0.5,
                    xPercent: 0,
                    scaleX: 1, 
                    rotation: 0,
                    ease: 'Power4.inOut', 
                    transformOrigin: 'left center'
        function loaderAway() {
            // GSAP tween to hide loading screen
            return gsap.to(loader, { 
                duration: 0.5, 
                scaleX: 0,
                xPercent: 0, 
                rotation: 0, 
                transformOrigin: 'right center', 
                ease: 'Power4.inOut'
        // do something before the transition starts
        barba.hooks.before(() => {
        // do something after the transition finishes
        barba.hooks.after(() => {
            ga('set', 'page', window.location.pathname);
            ga('send', 'pageview');
        // scroll to the top of the page
        barba.hooks.enter(() => {
            window.scrollTo(0, 0);
            transitions: [{
                async leave() {
                    await loaderIn();
                enter() {
    window.addEventListener('load', function(){


  4. Thanks a million for taking the time to respond... I have spent this afternoon 'trial and erroring' barba based on what you sent but still no cigar... the whole transition i have on my site works as it should do... infact it looks great... its just the bit where the animations don't play once entering the new page after transition.


    I noticed in your GSAP you included  .then(resolve()); which i thought fixed the problem... the transitions work, the animations work... but the link doesnt go anywhere, just stays on the page I am on... Maybe I am out of my depth with GSAP... I am so close I don't want to give up on it as it does exactly what I want... I am 99% there! eeek!

  5. Hey! Thanks so much for your quick response... I would happily set up a demo to help get to the bottom of this but this:

    8 hours ago, GreenSock said:

    lifecycle events in Barba where you'd have to put your GSAP code to have it fire when the page finishes loading or something? 

    could be what I am after.


    The site loads up perfect I then click a button to reveal a Barba transition to another page. However all the animations on the revealed page are frozen and I (think) need a command in either the Barba code or a GSAP command to PLAY these animation once the transition to the new page has been made.


    I seems a super simple fix, but my coding is basic. I hope this is clear and maybe @Ihatetomatoes could point me in the direction as I think it might be a Barba thing as opposed to a GSAP thing. I don't want to give up yet! :)


    I am literally using this exact code.. https://ihatetomatoes.net/demos/page-transitions-tutorial-with-gsap/


    But imagine each page in this demo has animations on it... they WON'T play after each transition. I hate to be a  burden to people but I feel I can really crack on once I have this part of my project solved.


    Enjoy the rest of your weekend :)



  6. Hey Guys! Great work with GSAP... I have recently installed @Ihatetomatoes's Barba on my site (kinda sucessfully)


    After each transition the the resulting animations dont work... as a noob to GSAP and Barba, I am probably missing a piece of code to play animations on page load... this is the bit I am stuck with... I know you dont offer 3rd party support, but I think this may be a simple GSAP fix...  I can see there are (barba) hooks to return to the top of the page once the page has loaded, is there one for PLAY animations / Scrolltrigger once page is loaded... Barba has seeming broke my site, but I am not giving up on it... any help would be MORE than appreciated... :)