[GSAP with Barba Stagger issue]

Hey all. I have a Barba with GSAP setup for my website. Everything works fine. The navigation on my site also works as intended initially but stops animating suddenly after i navigate to 2 to 3 pages. I am not sure why this is happening. Heres a demo link. http://fingerprints.co.in/protectmyphone/ (Try to navigate to 2 to 3 pages) The text in the menu will stop animating suddenly. Requesting some help in this as i am new to barba and GSAP. Thank you.

Burger menu animation code:

function pageTransition() {

 // Toggle Icone hamburger
    $(document).ready(function () {
        $('.barres').click(function () {
            $('.barres').toggleClass('active');
        })
    })


    // Greensock Animations

    var timeline = new TimelineMax();

    timeline.to(".menu", 0.8, {
        left: '0%',
        ease: Expo.easeInOut,
        delay: 0
    });
    timeline.staggerFrom(".menu ul li", 0.3, {
        x: -100,
        opacity: 0
    }, 0.1);

    timeline.reverse();

    $(document).on('click', '.barres', function () {
        timeline.play();
    });
    $(document).on('click', 'a', function () {
        timeline.reverse();
        $('.barres').toggleClass('active');
    })
    
}

    Barba setup:

barba.init({


    sync: true,

    transitions: [
        {
            async leave(data) {
                const done = this.async();
data.current.container.remove();
                pageTransition();
                await delay(1000);
                done();
            },
            
            async beforeEnter(data) {
				ScrollTrigger.getAll().forEach(t => t.kill());
			},

            async enter(data) {
                contentAnimation();
            },

            async once(data) {
                contentAnimation();
            },
		},
	],


});

barba.hooks.enter(() => {
    window.scrollTo(0, 0);
});

 

[Scroll trigger batch animation with Split text]

Hi Zach, Thanks a lot for your response, I am very new to GSAP and having a hard time trying to add batch animation to this. I went through the docs but was not able to implement it in the code. It would be great if you could help me with an example. 

Thanks!

[Scroll trigger batch animation with Split text]

Hey all, I am new to GSAP and the plugins associated with it.

How can i add batch animation to this code? I have multiple sections like this on my website.

Thanks for your help!

See the Pen gOrgYQr by Madbones3 (@Madbones3) on CodePen

[Page transition]

Hey this pen is great. Thanks Victor Work. I am still learning gsap and wondering how to have this animation for page transitions. Like i have a static html website and want to implement this animation in between the pages.