Jump to content
GreenSock

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

GSAP with Barba Stagger issue

Recommended Posts

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);
});

 

Link to comment
Share on other sites

Hey Dheeraj. Unfortunately these sorts of questions are a bit out of scope for what we can help with for free in these forums as they aren't really related to GSAP. Most likely your content is getting replaced and you're not recreating the animation for it or something along those lines. You have a ton of warnings in the console about elements that you're attempting to animate that don't exist. I recommend fixing all of those warnings. Maybe in the process you'll figure out what's going wrong with your menu. If you'd like someone to help debug your actual project you should hire someone to do that.

 

Additionally we highly recommend using the GSAP 3 formatting:

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×