GM_sql Posted January 29, 2022 Share Posted January 29, 2022 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 More sharing options...
GreenSock Posted January 29, 2022 Share Posted January 29, 2022 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? 1 Link to comment Share on other sites More sharing options...
GM_sql Posted January 29, 2022 Author Share Posted January 29, 2022 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. Link to comment Share on other sites More sharing options...
GreenSock Posted January 29, 2022 Share Posted January 29, 2022 Oh, are you saying your code is attempting to animate an element that may or may not exist? let tl = gsap.timeline(); tl.to(...); let element = container.querySelector(".something"); if (element) { tl.to(element, {...}); } Is that what you mean? 1 Link to comment Share on other sites More sharing options...
GM_sql Posted January 29, 2022 Author Share Posted January 29, 2022 Thanks Jack, I'll finally stick to my solution as my script is more complex (I published only a small chunk of the code) and allows me not to duplicate the code (functions). Link to comment Share on other sites More sharing options...
GreenSock Posted January 29, 2022 Share Posted January 29, 2022 I have a feeling I'm misunderstanding your question. My solution wouldn't require you to duplicate anything. 🤷♂️ Link to comment Share on other sites More sharing options...
GM_sql Posted January 30, 2022 Author Share Posted January 30, 2022 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 More sharing options...
GreenSock Posted January 30, 2022 Share Posted January 30, 2022 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. 1 Link to comment Share on other sites More sharing options...
GM_sql Posted January 30, 2022 Author Share Posted January 30, 2022 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 More sharing options...
GreenSock Posted February 1, 2022 Share Posted February 1, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now