TheNomadicAspie

Thanks anyway, I appreciate you trying to help. This will work for now if no one else has run into the same problem and has a better way to handle it.

For now I used a hacky solution I found to detect if the keyboard is visible, and then I change the scale amount if so. It's not ideal, but it's working for now. let full_window_height = window.innerHeight let is_keyboard = false let scale_amount window.addEventListener('resize', () => { if (window.innerHeight === full_window_height) { is_keyboard = false } else { is_keyboard = true } }) if (is_keyboard) { console.log("magnifyingGlassToCenter is_keyboard is true") scale_amount = 4 } else { console.log("magnifyingGlassToCenter is_keyboard is false") scale_amount = 8 }

Unfortunately not. I created one here but the behavior is different in CodePen. If you are typing in the input box and click the button, on CodePen it looks fine, but when I run it in my environment it becomes twice as large. I don't know if it's because of Parcel, my package bundler, or if it's something else... =/ Or maybe it's CodePen, because I noticed on CodePen my keyboard immediately shrinks before the animation plays, but in my environment the animation plays first, then the keyboard shrinks expanding the rest of the app, which causes the image to scale larger than it should.

I'm currently using an animation with scale: 8 to scale up a small image, and it works fine. This is how it looks. The problem is, at some points this animation is called when a keyboard is visible, which seems to cause the image to scale relative to that half-sized image, and then get even larger. Here's what I mean. So this is what the app looks like prior to the animation being called. Then this happens when the app resizes once the keyboard moves away. Is there a way to compensate for this?

Thanks, I used onReverseComplete and actually came across that thread just before you sent it, and I used the onUpdate combined with the method to track the direction, and it works! Thank you.

Throughout my code, I increment and decrement state_dict.animation_counter at the start and finish of each animation, so I can ensure a user doesn't interrupt the animation until it completes. I'm using a function hideButton to hide a button, and then showButton calls reverse() to reverse the animation. The problem is, I need to find a way to increment and decrement that variable at the start and finish of the reversal. I haven't been able to find a way to do this, is this possible? This is what I'm doing. function hideButton(button, show = false, text_string = false, buttonFunction = false) { hide_left_button_tween = gsap.to(left_button, { x: -window.screen.width, ease: "none", duration: 0.5, paused: true, onStart() { state_dict.animation_counter++ }, onComplete() { state_dict.animation_counter-- }, }) } function showButton(button, text_string = false, buttonFunction = false) { hide_left_button_tween.reverse() } Since I can't increment and decrement that counter, right now if a user interacts with my program during an animation, it halts the reversal of the animation. Any ideas?

Thanks, knowing that I was misunderstanding that part helped me fix the issue, I didn't realize that.

From what I understand, tweens delete themselves when the animation is over, correct? So how can I reverse it? I have two functions, showButton and hideButton. hideButton should always move the button off screen if it's not already, and showButton should move the button back to the original location. Sometimes the functions are called from my code again before the animation finishes, so I need to ensure the animation doesn't play while already in progress. To do that, I thought using .reverse() would be a clean way to ensure the animation returns to the original position, but I'm never able to call it because the tween no longer exists when the animation finishes. Could anyone please help me figure out what I'm doing wrong? I tried to create a CodePen, but keep getting "gsap.to/gsap.registerEffect is not a function" even after adding gsap as a library. let hide_left_button_tween let hide_right_button_tween function showButton(button, text_string = false, buttonFunction = false) { console.log("showButton showing ", button) const tl = gsap.timeline() tl.swapButtonText(button, { text: text_string }) button.onclick = buttonFunction if (!state_dict["is_speech_bubble_bottom_bar"]) { showSpeechBubbleBottomBar() } if (button === left_button) { if (hide_left_button_tween) { console.log("showButton hide_left_button_tween found, reversing") hide_left_button_tween.reverse() } } else if (button === right_button) { if (hide_right_button_tween) { console.log("showButton hide_right_button_tween found, reversing") hide_right_button_tween.reverse() } } } function hideButton(button, show = false, text_string = false, buttonFunction = false) { console.log("hideButton hiding ", button) if (button === left_button && state_dict.is_left_button) { hide_left_button_tween = gsap.to(left_button, { x: -window.screen.width, ease: "none", duration: 0.5, paused: true, onStart() { state_dict.animation_counter++ state_dict.is_left_button = false }, onComplete() { hide_left_button_tween = false if (show) { left_button.innerText = text_string left_button.onclick = buttonFunction showButton(left_button) } else { left_button.removeAttribute("onclick") } state_dict.animation_counter-- }, }) hide_left_button_tween.play() } else if (button === right_button && state_dict.is_right_button) { hide_right_button_tween = gsap.to(right_button, { x: window.screen.width, ease: "none", duration: 0.5, paused: true, onStart() { state_dict.animation_counter++ state_dict.is_right_button = false }, onComplete() { hide_right_button_tween = false if (show) { right_button.innerText = text_string right_button.onclick = buttonFunction showButton(right_button) } else { right_button.removeAttribute("onclick") } state_dict.animation_counter-- }, }) hide_right_button_tween.play() } }

Thank you, worked perfectly.

Understood, thank you and I won't ask CSS related questions anymore. I'll figure out a way around it.

I'm trying to animate a div being "tossed/thrown" from the right side of the screen onto a stack of other divs, and then sliding into place like in shuffleboard or curling. I'm using tl.set to end the animation in the correct place, but from here I need to animate the removal of the xPercent/transformOrigin properties so my div will end up aligned/on top of the other divs. If you click the document in this Codepen it should be clear what I'm trying to do. Is there a way to remove the set properties in a smooth transition?

I'm animating a "logo" div from the corner to the center of the screen using Flip, but when it passes my "question" div the animation becomes distorted. This doesn't happen if I remove the grid-rows property of my question div (I commented it out on my CSS, if you uncomment it you'll see what I mean). I don't mind using Flexbox or an alternative if there's no way to animate it properly while passing over an object with grid-rows, but I wanted to ask if there's a way around this? I've already tried adding gridRows to the props, but that doesn't help I'm assuming since the property belongs to an overlapping element and not the element I'm animating. I AM fading out my question div during the animation so it is a part of the Flip animation, so if needed I can remove and fade it out before the animation happens, but if possible I would like to find a way to do it asynchronously. Is there a way to do this without removing my grid entirely?

Sure I'll do that now. Thanks.

Thanks for the advice. Probably the best advice I've gotten, I was definitely trying to do too much too fast. I figured it out finally after slowing down , the grid-rows property of my question div was causing the distortion. I'm still not sure what to do about it, but at least I know why it's not working now so I can figure out another way to layout my CSS without using grid-rows, unless there's a way around it? I created a minimal demo and removed all of the HTML/CSS/JS that wasn't needed (Including the divs that have the other grid-rows properties), and commented out the one line that's affecting it under the question class. https://codepen.io/TheNomadicAspie/pen/gOWzQwW An alternative is I may just have to remove that element from the DOM before animating the rest, but the contents of the question div (question_text) is supposed to fade out gradually while the logo is moving to the center of the screen. If there's no way to do that though it's ok though, I can work around that. I'm trying to "toss" each of four divs from the right side of the screen, have them land on top of each other but staggered, then slide into place. If you imagined you were tossing a box onto a table and wanted it to hit the table and then slide exactly where you wanted it, that's what I'm trying to do. So the curved path is the "tossing" motion, then when it lands I'm trying to animate it to "slide" into where it needs to be after it lands. Your advice animating the x and y values separately worked great, and I'm understanding everything a lot better now. The animation is working, I started it using tl.set(answer_button_1,{xPercent: 50, transformOrigin: "0% 50%"}) so the animation would end up staggered. Now I just need to animate "unsetting" that xPercent, and I'm just not sure how. https://codepen.io/TheNomadicAspie/pen/MWmXYyW I tried power4 for ease and took it off for now because I want to ease while "unsetting" the xPercent: 50 so the div completes the first animation quickly, then slows down while sliding into place if that makes sense.

Thank you, so I copied your code exactly then did what you suggested and added each part of my code back one at a time to see where the problem is, and it breaks as soon as I add my "question" div. Is that because of the padding properties? .question { grid-row: 1/2; position: relative; font-size: 3vh; padding-left: 1em; padding-right: 1em; padding-top: 1em; padding-bottom: 1em; } I know the props are set for padding but is there a way to ignore the padding on the element it passes over? Or am I misunderstanding the issue? https://codepen.io/TheNomadicAspie/pen/poPVZZY Sorry about leaving out the logo_animation link in the Codepen, and I don't know if I have a GOOD reason, but I had some severe flickering issues when the DOM would load so I just decided to set all of my properties through Javascript and fade them in sequentially. Though I know I should set the source in HTML since you're not the first person to point out that it's irregular. For the motion path, Here's a Codepen though again for some reason despite it animating (Almost) correctly in my browser/IDE, I can't get the animation to work on Codepen. The animation is supposed to end where answer_button_1 is correctly. https://codepen.io/TheNomadicAspie/pen/BaRxojJ