Jump to content

Josh Mathis

  • Posts

  • Joined

  • Last visited

About Josh Mathis

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Thanks for taking a look @OSUblake I got stuck on trying to fix the CORS issue, and ended up figuring out a way to solve it with css. Adding an aspect ratio to the svg fixed it, for whatever reason. I really appreciate you trying to help though! Thanks again!
  2. @OSUblake Here's a simplified codepen: https://codepen.io/joshmath/pen/vYpgexq
  3. This is the first time i've used the flip animation, so i'm probably missing something, but for some reason, when running a flip animation, the "initial" state is squishing my svg. That's my main question, but if i can ask more than one question at a time, i have another one. If that's not allowed, i'm good with just getting the first one answered. The other issue i'm having is that I wrote separate timelines as a functions, and then am calling them all together by adding them to a master timeline. For some reason, the timeline that controls my "menu" (conveniently enough called menu in my code) is not honoring the delay that was set on the master timeline, and is starting immediately. To get a delay, i had to specifically add it to that timeline separately, but the other two timelines are honoring the master timeline delay. So any help there would be appreciated as well. Thanks!
  4. @CarlThat's a great explanation and I appreciate you taking the extra time to explain it for me. It would have never occurred to me to approach it like that, but it makes total sense. Thanks man!
  5. @Carl Thanks so much for the help and the very quick response! I knew it was going to be something simple like that, but I'd looked at it too long for me to ever see it. And thanks for giving me both options -- close on click and close on expanding another section! I knew what I had wasn't there yet, but I couldn't troubleshoot it without getting the other part working. So thanks for saving me the time there too. I'm not totally sure why it works to set the timeline to start in the reverse state, but I do get that it works and the use-case for it. If that's in the docs somewhere and someone wouldn't mind providing a link, I'd love to read on it further. Anyways, your help got me there Carl, and it is very much appreciated!!
  6. I have no doubt I'm missing something completely obvious here, but I've stared at it so long I can't seem to catch it. Basically, trying to create a simple accordion open/close animation. The animation is fine, but for whatever reason it's only applying to the last item. I'm still new to GSAP, so if while someone is looking at things, if there's a cleaner/better way to do this in general, i'd love to hear that as well. Thanks for any and all help!
  7. Thanks again for the help @OSUblake. That makes complete sense and you're doing some things I hadn't come across yet (in my admittedly very small experience with gsap). So, not only did you help me out, but I feel like I learned how to do it right the next time. Thanks!
  8. @OSUblake First of all, I'm not sure if i'm supposed to keep tagging you for more help on this same issue, so if that's against the forum etiquette, I'm sorry and I promise to learn from my mistakes 😃. I took a stab at doing this with just a regular timeline -- it turns out I was overly confident yesterday when I replied to you acting like that would be no big deal for me. I think, as far as the animation goes, what I did works and gives the proper effect, although I'm not sure I went about it in the most efficient manner. The main issue i'm running into is applying the animation on hover. It's only running for one instance of mouseenter + mouseleave, and then it doesn't run again. I'm assuming I need to tell it to "reset" things for the next instance, but I can't figure that one out. So, TL/DR question is: How do I "reset" a timeline after a hover event? Here's the link to the new pen: https://codepen.io/joshmath/pen/JjrzgyZ and again thank you for any help!
  9. @OSUblake Thank you very much for the help, and what you said totally makes sense. I actually started out doing it as a normal timeline animation, but then after reading more about flip recently, I thought that might be the way to go since i was essentially toggling between two states. It should have been a clue when I couldn't find any examples of flip doing what I was wanting. Again, thank you for the demo and the advice.
  10. I am trying to use the flip plugin to "reveal" information on a card click/hover. So, in the default state, there would be a card that just shows the title, and then on click, the title would slide-up, and the description and a button would be revealed. I'll also say that I'm pretty inexperienced with gsap and trying to learn more, so this may be the complete wrong way of even going about things. The flip animation is working partly, but it's only sliding the title up, not revealing the description and button. Any help/guidance/direction would be greatly appreciated. This first image is what it's currently doing, and the next image is what I'd like it to do.