Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

squxd

Members
  • Content Count

    12
  • Joined

  • Last visited

Community Reputation

2 Newbie

About squxd

  • Rank
    Member

Profile Information

  • Gender
    Male
  1. Hello all - I would love some help figuring out the z-index. I have everything like I want, however; the black Nike check is not moving to the front (over top of the yellow check on hover). Take a peek at my codepen, any help is much appreciated! Thank you! nick
  2. squxd

    SVG Hovers Cont. -

    On another note... Do you think this would be able to be inserted into a wordpress theme? Or know of any previous posts that relate to inline SVG's in WP? thanks! Edit: I can get the svg's in the right position, but I'm having trouble creating a custom JS file from my codepen...
  3. squxd

    SVG Hovers Cont. -

    Carl, I honestly do appreciate the time you have taken to reply. As you can probably tell, JS and GSAP are very new languages to me. This is actually my first "project" and with very basic knowledge/understanding of JS, I have been attempting to piece this together fairly rapidly... which is definitely not the recommended approach I'm sure, haha. I am way more Visual/Interactive/UX Designer than Developer at the moment but I am very excited - and see so much potential - for bridging these two gaps. Very thankful for what Greensock has to offer and look forward to our future encounters!
  4. squxd

    SVG Hovers Cont. -

    Hey all - As you may or may not have seen my previous post, this one has a few different issues I was unsure of how to fix. I am pretty satisfied at this point. The only other things I was struggling with were... 1) When hovering over the "U" or "D" to highlight the other svg's (U-X-D) blue. I was using the ':not' some in $(".blue-uxd:not(#diamond)").hover(function(){ joinButton.hide(); uxdButton.show(); 2) This line works but there are still some issues where the diamond does not return to a full 100% and stops mid-hover. And when animating back up it still fades quickly from
  5. squxd

    SVG Hover Animation

    and I guess this does not work like I thought it may... lol $("#xa-flip").hover(function(){ uxdButton.hide(); joinButton.show(this, 0, {background:"#00bbd3"}) // joinButton.hide(); // joinButtonActive.show(); }, function(){ joinButtonActive.hide(); joinButton.show(); });
  6. squxd

    SVG Hover Animation

    I guess I am having some trouble with how to show the Join button being active(filled in blue) while hovering over the "A"... and "glowing" to the same pace as the floating diamond... Here's where I'm at now: look more at the code below than the floating diamond. I got the "active hover to work on the "A" but it's inside another button that I cannot hide?... I'm not sure what the best structuring would in the html for the buttons. http://codepen.io/squxd/pen/RaXMmE $("#s, #q").hover(over, out); function over(){ TweenMax.to(this, 0.25, {fill:"#00bbd3"}) } function out(){ TweenMax.to
  7. squxd

    SVG Hover Animation

    Onward & Upward! https://codepen.io/squxd/pen/yOmOxr When a visitor lands here via phone/tablet (with no hover states), what would be the best way to have a the page automatically cycle through the action of hovering over each SVG letter and showing that corresponding text/button? O and I tried a few options for transitioning the button text to be a little smoother than 'jumping' from text to text on hover however, I found that the button text was displaying the two at the same time briefly. Any thoughts on how to get a smooth transition? Thank you! nick
  8. squxd

    SVG Hover Animation

    Hey thanks Carl - http://codepen.io/squxd/pen/wGLeMZ I was also able to add these show/hide states for the "buttons". But for some reason cannot get the button to center align... must be missing something! lol I think my next step will be too add hover transition to the "S" "Q" and "UXD" to be blue when showing the button below. And when hovering on the "X" that flips to the "A" make that hover state hide the "User Experience Design" button and make all the text "SQUAD" turn black. Thanks for the help! And any feedback on this idea would be greatly appreciated as well. nick
  9. squxd

    SVG Hover Animation

    UPDATE: I have come across a few examples (one being: http://codepen.io/MandyMadeThis/pen/iCeFl - that uses a similar idea I had mentioned earlier - hovering on individual SVG's and <div>'s). From here, I updated my Codepen (http://codepen.io/squxd/pen/wGLeMZ) to have a similar structure - and I believe it's actually the best solution. (Please correct me if I'm missing something!) I now have no awkward hover on the "X" flipping to an "A" (mouse over had to be stopped otherwise the animation would jump around/twitch). BUT now that the flip is on <div class="box" id="xa-flip"&
  10. squxd

    SVG Hover Animation

    Actually I just solved the hover issue on the "#x" in the JS with: $("#x, #a").hover(function(){ tl.play(); },function(){ tl.reverse(); })
  11. squxd

    SVG Hover Animation

    Thanks Carl! Would you foresee any problems if I changed the hover to be applied to only the (#x) part of the svg? http://codepen.io/squxd/pen/wGLeMZ (I played with it some and added a button for another idea I was trying to accomplish, but am not sure if it's feasible/friendly...) I'm going to play with it more now, but could you recommend a possible solution for this idea: hovering over the "S" and showing "Simple" within a button below? > then hovering over "Q" and showing "Quality" in the same button but replacing "Simple"? Also, If hovering on the #x ID causes problem
  12. squxd

    SVG Hover Animation

    1st post and it's a little rough... - I've been trying to create some hover animations on an SVG lately. Take a look at the codepen link (hover on x) to see where I'm at... My goal is to hover on the "X" and have the "A" flip/rotateY(180deg) to reveal. And when the mouse is off, have the "X" flip back. I will also mention/ask for further help having the diamond animate up and then back down relating directly to the hover of the "X". notes: - I know the "X" and "A" svg <path d=> are what is causing the width to be so far apart on rotation. This is to have the "X" in the
×