Jump to content
Search Community

How to apply the condition if exists

GM_sql test
Moderator Tag

Recommended Posts

Hi, I've coded a nice universal solution in order to show/hide different modals. Works great but I'm wondering whether it's possible to apply the condition if exists. Say, the last container.

function playModal([direction_X, direction_Y]) {
    return gsap.timeline({paused: true})
               .set(modalToShow, {zIndex: 1})
               .set(modalToShow.querySelector(".modal_outer"), {autoAlpha: 1})
               .to(modalToShow.querySelector(".modal_outer"), {duration: 1, ...direction_X, ...direction_Y}, "+=0.2")
               .to(modalToShow.querySelector(".modal_inner"), {duration: 0.8, opacity: 1})
               .to(modalToShow.querySelector(".modal_outer .nav_container_top"), {opacity: 1}, "<")
               .to(modalToShow.querySelector(".modal_outer .nav_container_bottom"), {opacity: 1}, "<")
}
Link to comment
Share on other sites

  • GM_sql changed the title to How to apply the condition if exists

I read your question a few times and I still don't understand what you mean. Can you elaborate? Are you saying you only want to do a certain part of the timeline if a certain condition is met? If so...

 

let tl = gsap.timeline();
tl.to(...);

if (condition) {
  tl.to(...);
}

Is that what you mean? 

  • Like 1
Link to comment
Share on other sites

Yeah, that's what I want to achieve. But I have a function, not a simple condition. I solved this by applying additional class. But I'm still curious what's gsap solution. I'm attaching sample photo. This demonstrates gallery modal where both ..._top and .._bottom container exist. But one can imagine menu with only X btn.

 

Bez tytułu.jpg

Link to comment
Share on other sites

No problem. I'll try to explain. The key is modalToShow variable. Please have a look how it's defined. Based on the trigger element I activate the proper modal (the are 4 modals). And coming back to my previous post concerning containers, I'm using only one function as it controls what and how is displayed/animated. I'm not an expert but seems that your solution requires 2 functions, provided that at least 1 modal has no container I had mentioned before. If any other, say, is without X container - then I need another function, etc.

 

async function showModal(e) {
    const {currentTarget} = e;
  
    switch (currentTarget.dataset.btn) {

        case "menu_trigger":
            modalToShow = document.querySelector(".menu_container");
            break;

        case "filter_trigger":
            modalToShow = document.querySelector(".filter_container");
            break;

        case "gallery_trigger":
            const imgToShow = currentTarget.closest("figure").dataset.img;
            modalToShow = document.querySelector(".gallery_container");
            modalToShow.querySelector(`.img_layer[data-img="${imgToShow}"]`).classList.add("active")
            break;

        case "cookie_trigger":
            modalToShow = document.querySelector(".cookie_container");
            break;
        
        default:
            break;

    };

    await freezeAllElements();
    modalAnimation = playModal([{xPercent: 0}, {yPercent: 0}]).play();
};
Link to comment
Share on other sites

It looks to me like you're over-engineering a bit and splitting logic across 2 functions in ways that's confusing and error-prone. 

 

I'd recommend making your functions very focused and specific. If you've got 4 cases that all do 1 common type of animation but then other parts of the animation are quite different, just keep things focused like: 

 

// create a quick lookup table (faster and simplifies your code)
const modalElements = {
	menu_trigger: document.querySelector(".menu_container"),
	filter_trigger: document.querySelector(".filter_container"),
	gallery_trigger: document.querySelector(".gallery_container"),
	cookie_trigger: document.querySelector(".cookie_container")
};

async function showModal(e) {
	await freezeAllElements();
	const btn = e.currentTarget.btn;
	modalAnimation = playModal(modalElements[btn]); // feed the associated element to playModal() which ONLY does the common stuff for all elements
	
	if (btn === "gallery_trigger") {
		modalAnimation.to(...); // do stuff specific to this one
	}
}

You don't even really need multiple functions at all. 

 

I wouldn't use magical external variables that alter the way a function performs. If anything, just parameterize things so it's clearer. 

 

Anyway, I hope that helps. 

  • Like 1
Link to comment
Share on other sites

I'm refactoring my code and have 1 question - at that moment.
How to pass an entire element (gallery_container) that is in modalElements

gallery_trigger: document.querySelector(".gallery_container"),

as an argument to modalAnimation.to(...) ? "This" - doesn't work.

Link to comment
Share on other sites

On 1/30/2022 at 5:35 PM, GM_sql said:

I'm refactoring my code and have 1 question - at that moment.
How to pass an entire element (gallery_container) that is in modalElements

gallery_trigger: document.querySelector(".gallery_container"),

as an argument to modalAnimation.to(...) ? "This" - doesn't work.

Sorry, I read your question several times but I don't understand what you're asking. Can you rephrase or elaborate? A minimal demo is always most helpful. 

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...