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

1. In my actual code I had an absolute positioned element in a relative positioned container, but I didn't know that affected things so to create the Codepen I positioned it absolute since that's the easiest way I knew to position it. I tried removing the container div but was unable to get the image to respect the menu_bar parent div's vertical constraints when setting height to 100%, or using object-fit: contain/cover. I created a minimally reproducible example on StackOverflow to see if anyone else could figure it out, but all of the suggestions involved using a container div. There was one suggestion that used translate to center the image, but that broke the animation. https://stackoverflow.com/questions/68595123/set-relative-positioned-image-tag-to-take-up-100-of-parent-divs-vertical-space/68595741?noredirect=1#comment121227815_68595741 If I keep the image absolutely positioned within a relative positioned div, the animation plays but this happens. Is this because of the absolute positioning? I've spent the last several hours trying to create a minimally reproducible example in Codepen, but I can't seem to reproduce the issue. https://codepen.io/TheNomadicAspie/pen/poPVZZY While in my IDE the animation smoothly works when fading in, then distorted the image fading out, in Codepen it causes the image to start in the center and then distorts my title and menu_bar divs on the way to the corner. I'm sure there's a difference in the code somewhere, but I've spent all day trying to find it and can't. 2. Thanks. 3. As I said I can't find a way to position the image correctly without a parent div, which I'm guessing is causing the distortion? No one on Stack Overflow can find a solution either. 4. Thanks, I thought I set them to be exactly the same crop/canvas size but I'll take another look. I may be using an outdate version of the image on Imgur than what I have locally. And then about my original topic of the motion path, I almost have my motion path working the way I want, but is there anyway to align the END of a path to an object, so that the motion ends up where the image originally was? Or in my example, I'm trying to end the motion 50% of the container div's width to the right of where it's normally positioned, and then slide it into place. I have the syntax almost right but just can't figure out how to end the animation where it's starting/align the end of the path with an object. gsap.set(answer_button_1, { xPercent: 50, transformOrigin: "0% 50%" }) gsap.to(answer_button_1, { motionPath: { path: '#toss_path', align: answer_button_1, duration: 1 } }).delay(1)

Ok I made a very simple Codepen that I think illustrates what I'm trying to do. The bad news is though previously I was able to animate logo to the state, scale, and position of logo_animation (Just couldn't do it back) somehow I can't even get that part to work now. But I think if you watched that video in my previous post and you see this Codepen, hopefully it's clear what I'm trying to do. Let me know if it's not please and thank you. https://codepen.io/TheNomadicAspie/pen/RwVMQNw

1. I just tried declaring a global logo_state and logo_animation_state var and assigning Flip.getState at the beginning of showLogoAnimation and that didn't work, I also tried getting the state at the beginning of hideLogoAnimation as well like this (Also showing the HTML attributes of the two elements I'm manipulating): <div id="logo" class="logo" data-flip-id="logo"> <div id="logo_animation" class="logo-animation" data-flip-id="logo"> var logo_state var logo_animation_state showLogoAnimation() setTimeout(() => { hideLogoAnimation() }, 2000) function showLogoAnimation() { logo_state = Flip.getState(logo, { props: "paddingTop,paddingBottom,paddingLeft,paddingRight" }) logo_animation_state = Flip.getState(logo_animation, { props: "paddingTop,paddingBottom,paddingLeft,paddingRight" }) question_text.style.visibility = "hidden"; question_text.style.opacity = "0"; logo_animation.style.display = "flex"; logo_animation.style.opacity = "1"; speech_bubble_middle_bar.style.display = "none"; speech_bubble_bottom_bar.style.display = "none"; console.log("showLogoAnimation"); logo.style.display = "none"; Flip.from(logo_state, { targets: logo_animation, duration: 0.75, ease: "power1.inOut" }) } function hideLogoAnimation() { logo_state = Flip.getState(logo, { props: "paddingTop,paddingBottom,paddingLeft,paddingRight" }) logo_animation_state = Flip.getState(logo_animation, { props: "paddingTop,paddingBottom,paddingLeft,paddingRight" }) question_text.style.visibility = "visible"; question_text.style.opacity = "1"; logo_animation.style.display = "none"; logo_animation.style.opacity = "0"; speech_bubble_middle_bar.style.display = "unset"; speech_bubble_bottom_bar.style.display = "grid"; Flip.from(logo_animation_state, { targets: logo, duration: 0.75, ease: "power1.inOut" }) } I did watch the video twice in the last hour and I haven't figured anything out that I didn't already know (Or thought I knew). 2. My actual code above does change the state of elements, but I was trying to create a minimal example as requested and thought it would still move the logo to the position and size of logo_animation while changing the element. In my code I toggle the visibility/display of question_text, logo_animation, logo, speech_bubble_middle_bar, and speech_buble_bottom_bar, but those elements use a lot of lines of code to display so I removed them from my Codepen since you said my code was too long. I should have found other elements to manipulate but I didn't understand (And still don't) why it was necessary. Essentially all I'm trying to do is take a logo div, and replace it with logo_animation while moving it to the center of the screen using the position and size that logo_animation usually has. Then for hideLogoAnimation, I'm trying to move logo_animation to the corner of the screen where logo is defined while scaling it, and then replace logo_animation with logo once it's in the correct location and size. That's why I said I'm trying to "reverse" the Flip animation. I do understand how it works in terms of saving the state, replacing one element with another, and then moving it to the desired location and attributes. I just don't get why my syntax isn't working, and I would have assumed without changing any of the states that both logo and logo_animation would be visible at the same time, but I must be missing something. I'm also really drained mentally from trying to figure it out, so I'm probably not thinking clearly. 3. Thanks for pointing out that error. I don't make that mistake in the code above (logo and logo_animation are defined elements so I don't reference them by the ID directly) but I do understand why that was not correct. 4. I know it's not needed but since I will need it in my real code I left it in assuming it wouldn't hurt, I did test it without props and there was no difference but sorry for leaving that in unnecessarily. I am trying to use the state of one element for a different element. As said I'm trying to animate a logo going from a corner of a screen to the center, while changing the actual logo div into logo_animation div. logo is always in the corner and is small and static, logo_animation is a gif that sits in the middle of the screen playing an animation repeatedly. So I'm trying to animate logo going from the corner to the center while becoming logo_animation, and then back to the corner. If you look at this video and then were to play it backwards, that's what I'm trying to accomplish. I don't want a refund yet and actually I edited my post right before you responded because I still want to try to figure it out, I just feel bad for the amount of your time I'm taking up. It's definitely not your or GSAP's fault. I'm in a unique position where I have coded casually on and off over most of my life, but have only recently started to pursue it seriously and realized how much I enjoy it. So my first experience with webdev stuff and learning JavaScript was 3 weeks ago. At the same time I'm learning everything so obsessively that I am very, very fast with Vim, have hundreds of shortcuts on my keyboard with AutoHotKey, type 130+ wpm, but at the same time I don't know a lot of very basic concepts, so despite seeming like I have general knowledge of programming, almost all of this is very new to me. Normally I figure things out by finding examples of exactly what I'm trying to do, then breaking down the code until I understand every word and every line of what's happening. Though GSAP is very popular, I can't find enough distinct examples of Flip to do what I'm trying to. Like how you said it's rare to need to use the state of one element for a different one, that's exactly what I need to do and I just am not seeing enough examples to figure it out. I appreciate you taking the time to try to explain it to me. And again I'm not trying to sit around and wait for you to do it for me, but I've been making tons of of progress learning lately, and this is a bottleneck for me. And most of the stuff I need to do next with my code is dependent on figuring Flip out, so I'm just frustrated trying to figure out if I should keep trying to figure out this one seemingly basic concept that I know is simple and obvious but I just can't write the code I need to... I do appreciate your patience and sorry for making you read all this. Doing my best to explain though.

3. I still can't find any duplicate ID elements but maybe I'll stumble across them sometime when debugging my code. I can't find what you mean though. And I'm trying so hard to understand this, the one concept I felt like I understood was that I needed a data-flip-id on both elements to flip between, but in your example you didn't use it. So I tried rewriting your code in a way that would work for me (Using just two squares), and I'm back to having code that has no errors but just doesn't do anything. I tried replacing the data-flip-id in Flip.getState with a reference to the actual element ID. At this point I don't even care about using the timeline to make it synchronous, I'm using setTimeout to wait 3 seconds between the show and hide animations, and it still doesn't do anything. https://codepen.io/TheNomadicAspie/pen/RwVMQNw Edit: Good news though, I was able to get the motion path working and it no longer disappears. I had a question_text div that was not visible but still taking up space in the DOM, so removing that fixed the issue as you pointed out.

1. I'm so sorry about that. Although I'm just responding now, as soon as you replied I took the file down and the link off my Codepen. I actually did try to find the links you sent me because I remember you saying it's possible to try them in Codepen without buying the license, I just couldn't find the links though. 2. I'll make it more minimal next time, sorry again. I tried to structure the code in a way where you only had to look at the parts I knew were relevant, but of course I know the issue could be anywhere in the code so in the future I won't include any code that's not about the animation. 3. I've been trying to figure out what you mean by this for a really long time. I checked my global Javascript element ID references and HTML. I thought you meant the flip-state-id and I changed them to be different and my code didn't work, so I checked the docs and confirmed the flip-state-id is supposed to be the same on both elements. Do you mean the MotionPathHelper/gsap.to lines? Because isn't one creating the helper from the ID and the other is defining the target of the animation? 4. The DOM loads my logo image before anything else, so I had to set visibility to hidden so I can fade in each element gradually so it would look better aesthetically, I forgot to change the body element though so I did that and I can see the copy path button now, thank you. 5. Do you mean the .speech-bubble class? Because that doesn't take up all of the screen, and even when I move the handles around the speech bubble it still disappears after I've clicked each of the three handles at least once. I'll probably just use one of the example Codepens I found to create the path and try to adjust it manually. I know that's the problem the helper is supposed to avoid but I don't know what else to do, I've read literally all of the docs and tried figuring it out for most of the last day. 6. Thanks, I did know that I needed to change the motionPath but I was still trying to figure out why the handles were disappearing and I didn't have a path to enter because I couldn't define one through the helper. Are you saying that's the reason it's disappearing though? Because the only difference removing the gsap.to line makes is instead of the path disappearing, it turns grey like this. About the Flip animation, I do understand what you're saying but I still can't figure out the correct syntax to define a Flip animation and put it in the timeline. The docs say the syntax for .to is (Object, {vars}), so I can't do tl.to(Flip.getState, etc...). I also can't do tl.to(state, {targets, etc because there would be no way to define that it was a Flip. Is there some example of how to add a Flip animation to a timeline? I've searched the ends of the internet and can't find one. Sorry I don't expect you to do everything for me, but I just don't see anywhere where the syntax is defined. I understand how Flip works, I don't understand how to add one to a timeline. This is my attempt, but it returns "TypeError: Cannot set property 'parent' of undefined" at the tl.to line. Also I know I shouldn't set the state until just before the animation should play since it needs to save the state at the time of the animation, but if I put it in showLogoAnimation then I get an undefined error for referencing state in the tween declaration. const state = Flip.getState(".logo", { props: "paddingTop,paddingBottom,paddingLeft,paddingRight" }) let show_logo_animation_tween = Flip.from(state, { targets: logo_animation, duration: 0.75, ease: "power1.inOut" }) let tl = gsap.timeline() tl.to(show_logo_animation_tween) tl.add(showLogoAnimation, "+=1") tl.play()

I created a Codepen here to show the issue (You should only need to look at the last few lines of the Javascript). [DELETED link because it contained links to unprotected members-only plugins] I thought at first it was an issue with my auto-save which refreshes my browser when data is altered, but even on Codepen the behavior is the same (There's also no copy button, maybe it's off screen?). Then about the Flip, the bottom two Javascript functions are the showLogoAnimation and hideLogoAnimation. If you uncomment them, showLogoAnimation is fine but uncommenting both of them doesn't work. I assume this is because it needs to be in a Timeline to run synchronously, and as is my code is executing it all at the same time. But I can't figure out how to add the Flip.from() to a timeline without executing it. Since I don't know how long the logo animation will play before the page is no longer loading and hideLogoAnimation needs to play, I need it to run sequentially which is a big reason I wanted to use Gsap to avoid timing my animations perfectly. I also tried using the below code to define the Flip.from() at the global scope so I could update the value of state and play it when needed/reverse it as you suggested. But that seems to try to play the Flip at the time it's declared, which doesn't work. var gsap_timeline gsap_timeline.add( Flip.from(state, { targets: logo_animation, duration: 0.75, ease: "power1.inOut" }).delay(1) ) var state function showLogoAnimation() { const state = Flip.getState(".logo", { props: "paddingTop,paddingBottom,paddingLeft,paddingRight" }); gsap_timeline.play() } I also tried declaring/defining what flip_animation is using variables and then defining those variables before playing, and that doesn't do anything either. var gsap_timeline var flip_animation gsap_timeline.add(flip_animation) var state function showLogoAnimation() { flip_animation = Flip.from(state, { targets: logo_animation, duration: 0.75, ease: "power1.inOut" }).delay(1) const state = Flip.getState(".logo", { props: "paddingTop,paddingBottom,paddingLeft,paddingRight" }); gsap_timeline.play() } I'm sure I'm missing something really simple but I just can't find what it is.

I'm attempting to animate several divs being tossed from the right side of the screen and then "sliding" into place to simulate the kind of effect if you threw something across a tile floor like this: From watching the videos/reading the docs, would the best way to do this be the Motion Path Plug-in/Motion Path Helper to animate the black line, then use Flip to move it to the permanent location (red line) to ensure the div ends up where it should be? Or should I use Motion Path for the entire thing? Anyway I'm trying to create a path using MotionPathHelper, so I tried the below code (#answer_button_1 is the div I want to animate). gsap.to("#answer_button_1", { motionPath: "path", duration: 2}) MotionPathHelper.create("#answer_button_1"); I can see the path, and I've read the docs and see I press alt to add new anchors to the vector, shift to toggle curvature, etc. But when I click and drag, I'm able to move the path once, and then it disappears. I thought this was because I was clicking an anchor point (Though aren't anchors square instead of circle), but no matter which part of the path I click it disappears as soon as I start trying to move it. Click for video I've been trying for the last 15 minutes and keep deleting it as I'm trying to edit it. What am I doing wrong? Also this is unrelated and maybe I should make a second post, but how can I reverse this flip animation? I know from the docs how to reverse a timeline, but there is no timeline here. Do I need to make a timeline to then reverse it? This is my "showLogoAnimation" function, and I want to create a "hideLogoAnimation" function to revert to the original state. const state = Flip.getState(".logo", { props: "paddingTop,paddingBottom,paddingLeft,paddingRight" }); Flip.from(state, { targets: logo_animation, duration: 0.75, ease: "power1.inOut" }).delay(1)

It does, that's exactly what I needed, now I can start learning more about the different options and plug-ins and hopefully not waste too much more of your time for awhile. Thanks so much for the help!

I just bought the business green license because I can tell this will save me a lot of time, but when using Flip instead of it replacing the image with the same position and size, it starts out much smaller. I've been trying to figure this out over the last day by debugging line by line but can't figure it out. Any idea what's happening here? You can't really tell what's going on from the preview since the app needs to be full screen, but if you go to the link you should see what I mean. It's on a one second delay, you can comment or uncomment the showLogoAnimation function to see. https://codepen.io/TheNomadicAspie/pen/WNjMeEJ

That's perfect, thank you so much. I initially tried to pass an ID to it before realizing it needed to be a class. That's completely fine for my purpose now, but in the future is it possible to use an ID? I tried replacing targets[0] with targets to see if that would work, but it didn't. It's no big deal if I need to use classes but was just curious so I know if I need to anticipate always using classes in the future or not? I'm really excited to learn about gsap btw, thanks for the help.