Lightbox gallery - gsap instead of css. How to?

[GM_sql]

Hi, I have a function that controls the next/prev image btn. Is it possible to apply gsap transition with duration instead of applying pure css active class?

.img_layer {
    display: none;
    width: 100%;
    height: auto;
}

.img_layer.active {
    display: block;
}

 

 

function previewImages(e) {
    const btn = e.currentTarget.dataset.btn;
    const gallery = document.querySelector(".gallery_inner_modal")
    const currentImg = gallery.querySelector(".img_layer.active");
    currentImg.classList.remove("active");
    
    if (btn === "next") {
        currentImg.nextElementSibling ? currentImg.nextElementSibling.classList.add("active") : gallery.firstElementChild.classList.add("active");
    } else {
        currentImg.previousElementSibling ? currentImg.previousElementSibling.classList.add("active") : gallery.lastElementChild.classList.add("active");
    }
}

[GreenSock]

Sure, GSAP can animate pretty much anything. 

 

Are you asking us to show you how to rebuild it all in GSAP? Like...you don't even want to switch the class at all? It's all possible, of course. Why don't you give it a try and if you get stuck, pop back here with a minimal demo (like a CodePen) and we'll do our best to help with any GSAP-specific questions. 

 

Do you mind me asking WHY you want to use GSAP instead of a CSS transition? Either way is fine, of course - I'm just trying to understand what's driving your decision. 

[GM_sql]

Sure, here is my case

See the Pen JjrYymr by grzegorz-malinowski (@grzegorz-malinowski) on CodePen

As all gallery imgs are not rendered at the very beginning and have different w/h, I can't use your tutorial case as a base and need to add active class with duration instead.

[Cassie]

Hey there @GM_sql, 

 

I'm afraid I'm not certain what the question is here? This example isn't using GSAP - you mention a 'tutorial base' but don't link to it at all.

 

4 hours ago, GM_sql said:

As all gallery imgs are not rendered at the very beginning and have different w/h

This wouldn't cause an issue with GSAP at all.

I'm not quite sure what you're after. We don't provide custom solutions in these forums, but we're very happy to answer GSAP specific questions if you have one.

[GM_sql]

Hi @Cassie, I've rewritten the code (also css) and this time I'm using gsap. Works pretty good (except the problem described in pt 1). Please let me also understand some gsap concepts I implemented into my project.
1. when I press prev/next button quickly, the opacity is not changed to 0, so the previous image is still visible. How to fix it?
2. how to add/remove data-attribute - now I'm using js to remove and onStart function to apply it?

3. how to clear applied styles by gsap? - but still keeping app functionality
4. could this code be further optimized?

See the Pen bGYEEyB by grzegorz-malinowski (@grzegorz-malinowski) on CodePen

[Cassie]

Hey there @GM_sql, 

 

Thanks for giving it a go! Appreciated.

You can make this a little simpler by using GSAP's wrap utility for the image index. ☺️ You can access the current target within the callback if you need to change an attribute too.

Maybe something like this would work?

See the Pen WNXrjPJ?editors=1011 by GreenSock (@GreenSock) on CodePen

[GM_sql]

Thank you, wrap util can be very helpful in fact. When it comes to my case, the first img is not necessarily 0 indexing - thus timeline and random number in js on load. At that form, when I close the gallery I see the current img and the initial one. Same story when I reopen the gallery. Is it possible to implement any condition to my initial code to prevent loading new img before the previous animation is completed? That would solve any problems.