[Add class with gsap for each section]

On 4/14/2022 at 5:37 PM, GreenSock said:

Jack, how do I reuse the function when to add something to the event listener? Using barba to load – http://mirmoc.com/

From the project page I want to go back to the main page, then run to the respective triggers you created. I think two options, either to do it with if else in your function, or to update the function in the barba hook where I go back to main page. 




Hi @Mir Moc. I assume you're looking for something like this?:

 

 

 

[Add class with gsap for each section]

7 minutes ago, GreenSock said:

Hi @Mir Moc. I assume you're looking for something like this?: Thank you so much! Exactly this.

 

 

 

[Add class with gsap for each section]

Hi everyone,

I'm trying to add a class of .selected to the nav links whenever each of the sections enters the viewport, with gsap, but lacking basic Javscript knowledge so here for your help

Made a codepen for it. Thanks

See the Pen xxEvrgR by mirmoc (@mirmoc) on CodePen

[Wordpress posts GSAP transitions through Barba breaks]

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. 

[Wordpress posts GSAP transitions through Barba breaks]

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