popflier

I guess you can thank me for that accomplishment in thread length. The sad part is that I am still no closer to getting my stupid menu to work since the last time I posted about it. I had to put it aside for the last couple of months as it was driving me absolutely insane. I actually was starting to work on this menu again recently and was feeling guilty for asking for more help on it in this thread since Craig has already given me a good portion of his time already. However, since it's been resurrected perhaps I can ask a few more questions so that I could possibly get this thing to work? (please!)

Yes, you're right. I was using the .off () method. In regards to doing a reset you said earlier: I looked into seek() and progress() and have been working with a fork of the last pen that you made. I figured that if I could get your pen to reset then I could apply the same logic to my menu. That being said, I can't get the menu to reset entirely in your pen and it's also doing some very strange things if I try and create/use a timeline as opposed to TweenMax. Of course, I don't understand why this is causing it to do what it's doing. I tried to do a reset using seek and progress first with just using TweenMax and then with creating a timeline. I grayed out what I had tried to do in the fork I made of your pen so you could see what I had done and failed at. I also tried using .add and .addLabel in combination with everything and that didn't work either. I even tried using restart() and pause(1). I setup an onComplete function for testing so I know the animation is getting access to that, but even if I use progress or seek in the onComplete it doesn't work. I looked through the forums and the docs and those posts suggest using seek() or pause(1). What am I missing? Here's my fork: << If JavaScript is still confusing for you right now, it may be worth your time to go back and do some additional training and practice. At the very least, it may be advisable to dial back your expectations on this menu for now. >> I've been enrolled and taken so many Udemy classes on JS and gone through the University bootcamp course and I still struggle with js. GSAP and three.js make more sense to me than vanilla js for some reason. I wish there was a Udemy GSAP course one of you guys could create. For me personally, I learn better from watching someone do it and explain why they are doing what they are doing as they go. I know that I'm never going to be a JS developer. I just really want to build my portfolio site and integrate GASP into it myself. happy thanksgiving!

I understand what you're saying about the onComplete function. Yes, I was confused between the two, but I understand now what you're saying. Regarding hiding the other links that were not clicked. I had wanted to do this so that a user couldn't run their mouse over where the text links used to be before they were hidden so that no one could still be able to click on any of them AFTER they had already clicked a link. For example, if you click on a link in your pen the other links flyaway and leave you with one. If you move your mouse over the location where any of the links used to be prior to flying away you can still click on them. I thought that if I used visibility: hidden that it would hide the link but still allow the space that the link took up to affect the layout, no? If I used display: none then shouldn't it theoretically remove all other links, other than the one clicked, from the layout? << autoAlpha is the same as opacity with one exception. Once the opacity hits 0, the visibility property is set to "hidden". >> I couldn't get it to work using any of these properties either in the tween or the .set. So how can you remove these other hidden links so users cannot click on them? << PS When you're calling functions it's quite helpful to add a console.log() to the function to make sure it's working. >> You're right. They taught us to do this in my 3 month full stack MERN certification course and I've just gotten lazy about using it. (and yes, javascript has always been difficult for me to comprehend.)

Thanks again for the pen examples and explanations. Just to clarify... <<1) ..." This also avoids the animationIndex variable that you increment with some of your clicks. ">> What do you mean exactly by "...avoids the animationIndex variable...?" I had tried to setup a canAnimate variable before when you mentioned it earlier in the thread. I think I didn't understand how to do this exactly, but this example makes more sense to me. <<2. Target all other links except the one that was clicked. There are many ways to do this. Earlier in the thread I think I showed you how to use jQuery's :not selector. Another way to handle this would be get the children of the siblings and animate those divs. >> Yes, I was trying to do this like you had showed me with the :not selector, but I was having trouble with it in conjunction with the splitText chars. I know that you created this example specific to my project to help me understand about how to use children/siblings. I greatly appreciate that. I hope others will find it useful. The one question I had was that after one of these links are clicked and the others disappear via the opacity: 0 attribute, those links are obviously still there...just not visible. How can I truly remove them while still keeping the clicked link visible? I tried adding an onComplete type of variable to run after the link letters have flown off to set the visibility of those links to hidden, but that didn't work. Why? function flyAway() { TweenMax.to($(this), 1, { color: "#42a6e0", ease: Linear.easeNone }); letters = $(this) .siblings() .children(); for (let i = 0; i < letters.length; i++) { TweenMax.to(letters[i], random(1, 2), { x: random(-200, 200), y: random(-200, 200), scale: random(0.5, 2), opacity: 0, delay: random(0, 0.25) },"finished"); } function finished () { TweenMax.to(letters[i],{ visibility: "hidden" }); } } 4. When you want to reset everything, there would be a number of ways to do it. You could seek() the progress() of the various timelines, you could set() the elements where you need them. You could also use clearProps(). https://greensock.com/docs/Plugins/CSSPlugin#clearProps I'll look into all of these. I'll probably have questions later about this but I've bookmarked and will return to this once I get some of the other elements working. Thank you!

Thank you very much for the example. This helped me so incredibly much! I have been working on this for hours since you posted this example. I've finally figured it out. I had originally put in "staggerFromTo" tweens in my previous pen. I couldn't get them to work and I didn't understand why so I removed them, which was why you didn't see them there. I looked at the Docs but they didn't help me to understand why they were not working. After seeing your example I realized that I was not actually coding the fromTo tweens correctly. I now understand how those tweens work because of your example. Thank you for doing that. The full pen that I am working from currently is here: I still have to figure out the following on this menu: 1) isActive() on initial menu load, 2) how to target the splitText characters when a main menu link is clicked 3) isActive() when mainMenu hovers are active 4) how to reset menu after a link is clicked (Is that all? I really hope so for my sanity...) 1) isActive() on initial menu load; While the isActive makes sense on your example, I can't figure out how to get the isActive() to work with a toggle button. I tried placing the playOpen function in the toggle click and using an if/else like this: $("#toggle").click(function(playOpen){ if (iconTL.reversed()) { iconTL.play(); TweenMax.set(".menuContainer, .socialContainer", {opacity: 1, visibility:"visible"}, "-=.5"); } else { iconTL.reverse(); var fade = new TimelineMax(); fade.to(".menuContainer, .socialContainer", 1, {opacity:0, ease: Back.easeOut}, .8); TweenMax.set(".menuContainer, .socialContainer", {visibility:"hidden", delay: 1.5}); } if ( animationIndex === "0") { TweenMax.set(".menuContainer, .socialContainer", {visibility:"visible"}) } else if ( animationIndex === "1") { TweenMax.set(".menuContainer, .socialContainer", {visibility:"hidden"}) }; animationIndex = ++animationIndex % 2; console.log(animationIndex); animations[animationIndex].restart(); function playOpen(e) { e.preventDefault; if (!close.isActive()) { open.play(0); } else if (!open.isActive()) { close.play(0); } }; That didn't work so I tried placing the playOpen and playClose functions inside the if/else if animationIndexes like this: $("#toggle").click(function(){ if (iconTL.reversed()) { iconTL.play(); TweenMax.set(".menuContainer, .socialContainer", {opacity: 1, visibility:"visible"}, "-=.5"); } else { iconTL.reverse(); var fade = new TimelineMax(); fade.to(".menuContainer, .socialContainer", 1, {opacity:0, ease: Back.easeOut}, .8); TweenMax.set(".menuContainer, .socialContainer", {visibility:"hidden", delay: 1.5}); } if ( animationIndex === "0") { TweenMax.set(".menuContainer, .socialContainer", {visibility:"visible"}) playOpen(); } else if ( animationIndex === "1") { TweenMax.set(".menuContainer, .socialContainer", {visibility:"hidden"}) playClose(); }; animationIndex = ++animationIndex % 2; console.log(animationIndex); animations[animationIndex].restart(); }); function playOpen() { if (!closeAnim.isActive()) { openAnim.play(0); } } function playClose() { if (!openAnim.isActive()) { closeAnim.play(0); } } That didn't work either. I also tried putting the playOpen and playFrom functions directly into the if/else if animationIndex statements instead of calling "playOpen();" and "playClose();". Why do none of these work? 2) How to target the splitText characters when a main menu link is clicked My goal after a main menu link is clicked is for the following to happen: The link that has been click would change color. ALL of the OTHER links that were not clicked on both the main menu and the social media menu would "dissolve" or "blow apart" (just like they already are when you click on the toggle button to close the menu.) I will have another animation happen to the link that was clicked after the rest of the links "blow apart." I'm still figuring out what I want it to do here. I have tried already to do this a couple of different ways but I cannot get it to work. I have tried creating another animationIndex that would have the timeline for a link clicked and the animations that would happen to the links not clicked and a second timeline that would reset the menu. I've been focusing on just trying to get the first timeline to work and not the reset timeline. var mainClick = new TimelineMax ({paused: true}); var mainReset = new TimelineMax({paused: true}); var mainIndex = -1; var mainAnimations = [mainClick, mainReset]; $("#toggle").click(function(){ // if ( mainIndex === "0") { // } else if ( mainIndex === "1") { // }; mainIndex = ++mainIndex % 2; console.log(mainIndex); mainAnimations[mainIndex].restart(); }); var splitText = new SplitText(".menuLinks", { type: "chars" }); var charsMain = splitText.chars; var socialSplit = new SplitText (".socialLinks", {type: "chars"}); var charsSocial = socialSplit.chars; $(".menuLinks").each(function(i, element) { var targets = $(this).find("div"); $(element).click(toDo); function toDo(e) { e.preventDefault; // for the link clicked // $(".menuLinks").off(); } mainClick.staggerTo(targets, 0.5, {color: "#731012", x:-120},"menuClick",.05); for (let i = 0; i < charsMain.length; i++) { mainClick.to(charsMain[i].not(this), 1,{ x: Math.random() * 400, y: Math.random() * -400, scale: Math.random() * 2, opacity: 0}, Math.random(),"menuClick"); } }); This code will allow the clicked link to change color and move -120 in the X direction but I cannot seem to target the characters for all of the other links that were not clicked so that I can essentially "blow them apart" like in the closing button animation. How can I target the characters for these other links? I also tried not putting these two timelines in indexes but that didn't work either so I deleted that code. 3) isActive() when mainMenu hovers are active I basically just want the user not to be able to click on a link until the hover animations have completed. I was trying to do something like this with the note that I have in the code below, but I don't know how to write it. I think it would work if I knew how to write that line of code. //////////////////// MAIN MENU AND SOCIAL LINK HOVER ANIMATIONS ////////////////////////// var splitText = new SplitText(".menuLinks", { type: "chars" }); var charsMain = splitText.chars.length; var socialSplit = new SplitText (".socialLinks", {type: "chars"}); var charsSocial = socialSplit.chars.length; $(".menuLinks").each(function(i, element) { var mainHover = new TimelineMax({ paused: true, reversed: true }); var targets = $(this).find("div"); mainHover.staggerFromTo( targets, 0.15, { color: "#cd2026", opacity: 1, rotationY: 0, x: 0}, { color: "#7b9898", opacity: 1, rotationY: 360, x: -20, ease: Back.easeOut}, 0.03 ); //////////////////////////// MAIN MENU LINK HOVERS //////////////////////////// $(element).hover(mainHovers, mainHovers); function mainHovers() { if (!mainHover.isActive()) { //then do not allow a link to be clicked until the mainHover timeline has completed// } if ( mainHover.reversed() ) { mainHover.play(); } else { mainHover.reverse(); } } }); Last but not least... 4) How to reset the menu after a link is clicked This one I have been trying to figure out for months. I know that once the menu is on the site that when a link is clicked it would load that page and essentially would reload the menu. However, if this were coded for a React app , which I may do, then I would need the menu to be able to be reset after a link is clicked. This is a function that I know I will need in other areas of my final site but I don't know where to start. Like I said earlier, I tried using an index for playing a link and resetting the menu but I couldn't get the first part of that theory to work so I didn't try getting the second half of that theory to work. Would even doing an index like this work? Are there any pens that you can point me to for examples as to how this might need to work? Thanks so much for your assistance with this!

Thanks Craig. Yes, I changed the menu slightly. I was having issues getting the menu to dropdown on click so I changed it to the way that it is now. Pretty much everything else is the same except for the way the menu closes if someone doesn't click on a link. I see now what you were saying about the timeline restarting. I changed the opacity and could then see the issue. I was able to get the containers to become visible/hidden using this code you suggested: if (iconTL.reversed()) { iconTL.play(); TweenMax.set(".menuContainer, .socialContainer", {opacity: 1, visibility:"visible"}); } else { iconTL.reverse(); var fade = new TimelineMax(); fade.to(".menuContainer, .socialContainer", 1, {opacity:0, ease: Back.easeOut}, .8); TweenMax.set(".menuContainer, .socialContainer", {visibility:"hidden", delay: 1.5}); } I wanted the text characters to fade out when the menu was closed and not just have it be abrupt so I added a timeline to fade it and then set it to hide the container. This seems to work ok. I also changed the CSS transition for the hover like you suggested to avoid conflicts with GSAP: TweenMax.set("#span1, #span2, #span3", {backgroundColor:"#cd2026"}); I did the same for the hover off. That works now, but this is where the good new ends. In regards to resetting the timeline you said: "You'll either need to set() those elements back where you want them or use fromTo() tweens in your 'open' timeline. My recommendation would be the latter. " I still cannot get this to work. I've tried a number of different lines of code both inside and outside of the click event but nothing seems to work in order to set the animation back to it's starting point. I tried doing .set and staggerFromTo but when I do that the menu completely freezes and no longer opens at all. What am I doing wrong? I see what you're saying about the global variable for isActive. I set it up similar to how you did in your pen. I can't tell if it's working because like I mentioned in my previous post my hover animations are glitchy and I don't understand why that is. There must be some conflicting code but I can't seem to find it. I'm sure that you thought I gave up on this menu, but I haven't. I took your earlier advice and broke everything up into sections. It all fell apart again once I tried integrating the code together with the different pieces. I'm not giving up on it until it works Thanks for any assistance.

I have not given up on this navigation menu and have been working on it for months. One day I will get it to work. That being said, I could really use some help answering a few questions because no matter what I have tried I do not understand why the code doesn't work in places the way I think it should. Here are the questions that I cannot figure out right now. There will be more I'm sure later. I have tried breaking things into sections like you recommended. I get one thing working but then when I try to integrate it with other code it no longer works like expected. I haven't gotten to the clicked link animations yet, which is why I have them disabled. I need to figure out why these first parts do not work first. Here is the main pen that I am working with now: 1) The .menuContainer and .socialContainer visibility. These classes need to be hidden until the menu button is pressed. When the menu is closed and after a link is clicked there is a set of animations that run. Once those complete the containers need to be hidden I have tried this a thousand ways, but it's still not working correctly. I have set CSS visibility on these classes to hidden, changed it to visible on menu click, and changed back to hidden when the menu button is closed or a link is clicked. Doesn't work. I have tried using an if/else statement on the animationIndex so that when the index is 0 the containers are hidden and when the index is 1 the containers are shown. Doesn't work. I have tried adding / removing the classes entirely. Only sort of worked but it was very glitchy. 2) I cannot get the animations to restart if the menu button is clicked to open a second time. I was able to get this to work using this code that I had found on another Greensock pen, but once I tried to integrate it into my main pen with the other animations it no longer worked. I like the idea of setting up the open/close animations in an index like this. I just can't get it to work right. 3) I am still struggling to get the "isActive" code to work on any of the animations. I have tried a thousand different ways to get it to work so that when any animations are running the user is not able to click on anything until ANY currently running animations first complete. I have tried so many different ways to do this that it's not even funny. For example, this code for the menu link hovers. Why doesn't this work so that a hover animation first has to complete before another hover animation will begin? Why are my hover animations so glitchy? $(".menuLinks").each(function(i, element) { var tlLoad = new TimelineMax({ paused: true, reversed: true }); var targets = $(this).find("div"); var menuLoad = tlLoad.staggerTo(targets, 0.25, { color: "#7b9898", x:-20, rotationY: 360, ease: Back.easeOut }, 0.03); $(element).hover(mainHover, mainHover); function mainHover() { if(!menuLoad.isActive()){ menuLoad.reversed(!menuLoad.reversed()) if (!tlLoad.reversed() ) { tlLoad.play(); } else { tlLoad.reverse(); } } } I would greatly appreciate any help with these questions. Thanks in advance.

Thinking about it and working on this for the last two days, I thought it would just be easier to create a toggle menu button instead of having the other menu button I created to initiate the animation on click. Not using Greensock, I was able to create a simple toggle button that when pressed overlays a main menu navigation. However, when I try to integrate that code with Greensock I can't get it to work properly. I think part of my issue may be with scope(?), which is why I keep declaring the same vars and timelines throughout the code. The things that seem to work correctly are: 1) The initial page loads correctly with just the hamburger menu button in the top right corner. 2) When the menu button is clicked the menu drops down and seems to load correctly. 3) The menu button animates to an "X" like it should. 4) When the menu button is pressed again the "X" animates back to the hamburger button. From this point on nothing else works and I am not 100% why that is. I keep thinking I need some If /else statements to fix some of it, but when I try and implement that code it doesn't work. (there's some code in my pen that's been deactivated so you can see what I mean about these.) I tried creating separate functions to work after links are clicked to reset the alpha and opacity but it's not working. I'm just really frustrated. I've spent nearly 200 hours trying to figure out how to get it to work and I'm no closer. I'm about ready to just say forget it and use the non-animated toggle code I created and just use that menu instead. Maybe you see something in the pen that's an easy fix?

Okay, I lied....but not intentionally I swear I thought this was finished (!!!) and while it is I can't figure out how to integrate it into my site. I need to have a separate button that is not part of this navMenu trigger the menu sliding down. I added "paused: true" to the first timeline in the sequence so that prevents it from automatically running it. However, the three issues I have are: 1) How can I setup the "menu" button in the pen so that it will have the navMenu we created slide down from the top and go through it's animation sequences? 2) As you can see the overlay/navMenu is still taking up space but isn't visible. The navMenu has pushed the header menu button I added further down the page instead of that button being at the top. How can I keep the menu button at the top so when it is clicked it triggers this navMenu we created? I want the navMenu to "overlay" any content that might be on the page and not push that content down the page. Does that make sense? 3) How would I adjust my click function on my "X" close button in my navMenu to close out the navMenu and make sure the menu button I created slides back to the top again? Here's the updated pen: Sorry Craig...I really thought I was done with this.

<<The hover and click didn't work because you have the .xBtn class z-index set to -50. Change that and the hover and click work just fine. >> I am so glad that I asked you about this because I absolutely would never have figured out that this was the issue. I obviously only copied the JS and not the CSS from your pen. <<There is one error in the exitAnim() function. The tween on line 118 is missing the duration.>> My thinking in doing that was I thought that if I left the duration off that it would default to 0. <<(You also wouldn't want that timeline paused.) Here's a new fork of your pen with those changes.>> I'll be honest. I'm still trying to figure out the callbacks. I usually have to add and remove them just to see how it affects the timeline, but I've been researching them in the docs. <<In answer to your question about the +=180 for the lines: I used that because you said you wanted the x shape to rotate 180 degrees on hover. Those lines have already rotated several times so rather than try to figure out an exact rotation it's just easier to rotate 180 degrees from their current location.>> Okay, so that's how you do that! I kept trying to find a way to append or join the those two lines. I must have tried 50 different lines of code and spent hours researching it. I knew there must be a simple way to do it...and there was. I'm pretty sure that I've got it from here on this menu, which I am sure that you must be ecstatic about since you've spent so much time helping me with this. I need to do some timing tweaks an make a few other adjustments but I'm confident that I can finish it on my own. Thank you so so very much for your time and assistance. I greatly appreciate it! I have a couple of other things to put together so I'm sure it won't be the last time I post a question

Thank you very much for your assistance (once again!) Your forks helped me to get the link code the way that I wanted, but more importantly to understand a lot more about how Greensock works. For example, I didn't realize you could place an array in the code like this. I understand how the += works in relation to time but I don't understand why you used it here for the rotation? tlRotate.to([line01, line02], .35, {backgroundColor: "#ddd", rotation:"+=180"}); I created a new fork based on the one you had made here below. For some reason when I tried to combine the close button code into this fork the hover and click events for the close button no longer work and I'm not sure why? I tried using the code without any edits and it didn't work at all. I've now edited the code the click event the way I wanted it with the idea that when clicked the close button goes away (like an on/off button) and the whole navMenu fades out. That's at least what I'm trying to get to happen in the code I wrote. Thank you so much for your generous time and assistance with this entire menu. nicole

Thanks Craig for explaining all of that to me. I forgot about concatenation so now the indexing makes sense. Finally...my question that I said I would get back to earlier! Going back to my last question, " How can I target all of the other links in the menu aside from the one being clicked on? " I realized your hierarchy solution would work in many cases. However, I don't know that it will work for what I am trying to do. The reason being that when a link is clicked on my menu I want to have that link remain visible and I want for the other links in the menu to fade out. When I tried to use the hierarchy method all of the links end up fading out, including the one clicked. I tried to pseudo code what I am ultimately trying to do, which I detailed below. I think I have to figure out how to: 1) target all links but the one being clicked other than using the hierarchy method. 2) how to kill a hover event 3) understand how I can reverse an animation on a specific timeline when I am using multiple timelines in my menu. I think I just have to figure out how to do these 3 things and I can put this menu together. Once the main menu link has been clicked I want to kill() the main menu hover script because the clicked link doesn't stay the dark red like I want. If you move your mouse off or over the clicked link again. The hover script activates and the colors change. I don't want that to happen. I want the clicked link to remain the color I've stated in code already and remain in the shifted position that happens on hover (x:-20.) I'm wanting to follow the below pseudo code in this order: (I imagine all of this pseudo code would go inside a main menu click event) 1) if $".menuLinks" is clicked 2) turn the clicked link to #731012 and remain at the x:-20 position that it's in 3) kill() the .menuLinks.hover code so it won't activate if you move your mouse off of the clicked link 4) then fade out all of the other main menu links that were NOT clicked 5) then reverse the line of code below (this is for the socialLinks animation on the left:) tl.staggerFrom(charsSocial, 0.30, { opacity: 1, scale: 0.01, y: 0, rotationY: 360, ease: SteppedEase.config(20) }, 0.05); 6) finally, reverse the "navMenu" animation below (this is the same code from the initial animation sequence but needs to be in reverse) tl.fromTo(navMenu, 1, { y: -450 }, { ease: Back.easeOut.config(1.2), y: 0 }); Then I'm trying to do a similar thing with the Social Links on the bottom left except it would be: 1) Turn the clicked link into a solid color 2) kill () the hover animation on the socialLinks 3) fade out the other socialLinks NOT clicked 4) reverse the menuLinks animation code below: tl.staggerFrom(charsMain, 0.62, { opacity: 1, scale: 0.01, y: 0, rotationY: 360, ease: Back.easeOut }, 0.05); 5) finally, reverse the "navMenu" animation below (this is the same code from the initial animation sequence but needs to be in reverse) tl.fromTo(navMenu, 1, { y: -450 }, { ease: Back.easeOut.config(1.2), y: 0 }); Here's everything that I have so far: The CLOSE button is another issue that I am trying to work out on a separate pen. I'm just trying to get the entire "X" to rotate on hover and reverse it's initial loading timeline animation on click. Seems so easy...not! Here's the pen for that. (I put some comments in the JS code too.)

I think I'm learning more in this thread than I did in 3 months of coding bootcamp. You've been so wonderful with your time and I understand if you will need to just cut me off from asking questions. That being said...I have a couple more questions about the menu I'm trying to code. However, I also have a question pertaining to the pen you did above for @smallio. For the pen, my question is about the "part 2" in the code. You have used tl.add("part 2"); And then called "part 2" again at the end of the timeline tween code: tl.to(theTarget, 0.5, { backgroundColor:colors[i], ease:Linear.easeNone }, "part2"); tl.staggerTo(splitText.chars, 0.75, animations[i], 0.04, "part2"); So you can use the .add to literally add tweens to the timeline? Does this content get initiated after the previous content completes? For example, if I had a tween that said move box to x:0, y:0. Then I used the tl.add and then had a second tween on the same timeline that said move box to x:10, y:20. Would the box complete it's movement to x:0, y:0 and THEN do it's movement to x:10, y:20 because I used the .add? Can you explain why you are calling an ID that doesn't exist in the HTML or CSS here? There is an ID that is #image1, #image2, #image3 but there isn't an ID that is just "#image" and that's confusing to me. tl.to("#image" + (i+1), tl.duration(), {opacity:1}, 0); I'll ask the question pertaining to my menu in a separate post to not confuse the two. Thanks!

Ok. So you're using the hierarchy to change the colors. I knew that worked with CSS, but I guess I didn't know that it worked the same with JS. Meaning, you make a change to something and then any changes you make to that same thing further in the script overrides the previous code. Yes, that makes sense...thank you!

Okay. I've looked through your code and that makes sense to me how you set it up. I did it because it's the only way for the code to make sense to me. After spending a stupid amount of money and 3 months this year in a full-time full stack certificate program I realized that JS doesn't really make sense to me unless I write it in a weird and redundant way. Thanks for leaving them broken. It allowed me to mess with them a bit. Your code and your information make sense to me so thank you. It's sooooooo close but not exactly what I'm wanting. I think if I knew how to do one last thing that I could get the rest of it to work the way I wanted. Can you answer this question for me? How can I target all of the other links in the menus aside from the one being clicked on? For example, if you just look at the social media links right now, when you click on a link the color of that link clicked turns to #cd2026. Let's say I clicked on "Dribble." How can I change the color of ALL of the OTHER links in the same menu (like Facebook, Twitter, and Behance) when the Dribble link is clicked? I'd like to have it setup so that regardless of what link is clicked in that menu the clicked link turns to the dark red color and all of the other links turn to a different color. My problem is that I cannot figure out how to target all of the other links ? I tried using an index and doing targets and targets but that didn't work for me. I am ultimately trying to get the main menu on the right to exit exactly like the menu on this website does when a main menu button link is clicked or the Close button is clicked. (Im doing my social media links differently in how they work on click) : https://cuberto.com/about/ The pen that I have been working on is here: Thanks in advance for any help. You've been wonderfully helpful and I greatly thank you!