[ScrollTrigger Not working after Barba Transition]

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

[ScrollTrigger Not working after Barba Transition]

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

[ScrollTrigger Not working after Barba Transition]

If it helps this is the code I am using for the transition ^^

[ScrollTrigger Not working after Barba Transition]

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(() => {

        document.querySelector('html').classList.add('is-transitioning');
        barba.wrapper.classList.add('is-animating');

    });

    // do something after the transition finishes
    barba.hooks.after(() => {

        document.querySelector('html').classList.remove('is-transitioning');
        barba.wrapper.classList.remove('is-animating');
        ga('set', 'page', window.location.pathname);
        ga('send', 'pageview');
    });

    // scroll to the top of the page
    barba.hooks.enter(() => {

        window.scrollTo(0, 0);

    });

    barba.init({
        transitions: [{
            async leave() {
                await loaderIn();
        
            },
            enter() {
                loaderAway();
            }
        }]
    })

}

window.addEventListener('load', function(){
    init();
	
	
});

 

[ScrollTrigger Not working after Barba Transition]

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!

[ScrollTrigger Not working after Barba Transition]

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

 

 

[ScrollTrigger Not working after Barba Transition]

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...