How do I convert this code to work with multiple items

[MennoPP]

I trigger this function when moving form a 'work overview' page to a 'work detail' page...
It works fine when I have just 1 item on the 'work overview' page. 

The animation triggered by the BarbaJS transition:

function workImgAnimation() {
    const thumbnail = document.querySelector(".work_img_thumb");
    const state = Flip.getState(".work_img_thumb");
    thumbnail.classList.toggle("active");
    Flip.from(state, {
        duration: 1,
        absolute: true,
        toggleClass: "active",
        ease: "power1.inOut"
    });
};

This is the BarbaJS code that triggers the animation:

async leave(data) {
  const done = this.async();
  workImgAnimation();
  await delay(1000);
  done();
},

I am hoping someone can help me get it to work when there are multiple 'work_img_thumb' items...

Need to only 'trigger' the clicked .work_img_thumb somehow, but my JS skills have been too limited so far.

[Cassie]

Hey there!

 

I'm a little unsure about why you're toggling a class of active both in the Flip call and outside. Seems a little strange to me, but I don't know what the rest of your code/styles are doing so maybe it's fine.

Either way, you'll just want to use a loop of some sort and querySelectorAll().

Like so
 

function workImgAnimation() {
    const thumbnails = document.querySelectorAll(".work_img_thumb");
    const state = Flip.getState(".work_img_thumb");
  
    thumbnails.forEach(thumbnail => {thumbnail.classList.toggle("active")});
  
    Flip.from(state, {
        duration: 1,
        absolute: true,
        toggleClass: "active",
        ease: "power1.inOut"
    });
};

 

Hope this helps!

[Cassie]

Oh wait - just saw the sentence below the bolded one.

Can you pop together a minimal demo for us? Don't worry about barba and all the rest - just a simple codepen with some coloured boxes, toggling a class and playing a flip animation. Thanks!

[MennoPP]

Here the needed CodePen:

 

I need each .work_link_item page link to trigger the workImgAnimation function, but only for the clicked element and it's .work_img_thumb...

Right now in my site the workImgAnimation function is triggered by BarbaJS when any link from the 'work overview' page to a 'work detail' page is clicked. Need it to trigger in this way, but ONLY for the clicked item.

See the Pen WNzoZrb by DESIGNfromWITHIN (@DESIGNfromWITHIN) on CodePen

[GreenSock]

I'm not sure exactly what you need and there's no CSS in your demo, but maybe this will help:

See the Pen GRxNQJP?editors=0110 by GreenSock (@GreenSock) on CodePen

[MennoPP]

Thank you! Finally got it working. On my new site soon but here a video of it.

My code now:
 

function workImgAnimation() {
const workThumb = gsap.utils.toArray(".work_img_thumb");
workThumb.forEach((el) => {
    el.addEventListener("click", () => {
        const state = Flip.getState(".work_img_thumb");
        el.classList.toggle("active");
        Flip.from(state, {
            duration: 1,
            ease: "power1.inOut"
        });
    });
});
};

For the BarbaJS I just load the script when entering the work overview page...
And add a delay for the leave BarbaJS animation when going to a work detail page.
 

{
  name: 'workitem',
    async leave(data) {
      const done = this.async();
      await delay(1000);
      done();
    },
	to: {
		namespace: [
			'workitem'
		]
	},
	from: {
		namespace: [
			'workoverview'
		]
	}
},
{
	name: 'workoverview',
	once() {
		workImgAnimation();
	},
	async after() {
		workImgAnimation();
	},
	to: {
		namespace: [
			'workoverview'
		]
	}
}