Jump to content
Search Community

Wordpress posts GSAP transitions through Barba breaks

Mir Moc test
Moderator Tag

Recommended Posts

If the GSAP timeline is not finished, when I load the next/previous post with Barba, it breaks. This is the problematic transition. Can anyone spot what's wrong here? Thank you

 

	{
			name:"next",

			leave({ current, next, trigger }) {
				return new Promise(resolve => {
					const timeline = gsap.timeline({
						onComplete() {
							current.container.remove()
							resolve()
						}
					})
					const image = current.container.querySelectorAll(".photo")
					timeline
					.to(image, { opacity: 0 }, 0)
					})
			},	

			beforeEnter({ current, next, trigger }) {
				return new Promise(resolve => {

					const timeline = gsap.timeline({
						onComplete() {	
							resolve()
						}
					})

					const image = next.container.querySelector(".photo img")
	
					timeline
					.to(image, {opacity: 1}, 0)
				})
			},
			
			enter({ current, next, trigger }) {
				return new Promise(resolve => {

					const timeline = gsap.timeline({
						onComplete() {	
							resolve()
						}
					})

					const charge = next.container.querySelector("#charge")
					const years = next.container.querySelector(".years")
					
					timeline
					.set(charge, {opacity: 0, x: "-100%"})
					.set(years, {scale: 0})

					.to(charge, {opacity: 1, x: 0}, 0)
					.to(years, {scale: 1}, 1)
				})
			}			
		}

 

Link to comment
Share on other sites

Thank you. I received an answer on Barba github, there is an option to prevent clicks during the transition preventRunning. Somehow it solves my problem! I wouldn't know how to make a Codepen demo, it's a fiddly setup in Wordpress. 

  • Like 2
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.
×
×
  • Create New...