squxd
squxd's Achievements
2
Reputation
-
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
-
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...
-
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! Also, thank you for pointing me in the right direction!
-
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 black to blue. Could I use a switch or something that only activates if the diamond reaches the top/floating step? TweenLite.from("#diamond", 1, {fill:"#00bbd3", progress:0}) 3) And when I hover over the "X/A" the " join button fades out and the "What are you waiting for?" fades in right after... $("#xa-flip").hover(function(){ button.hide(); uxdButton.hide(); joinButton.hide(); hiddenButton.hide(); joinButtonActive.show() TweenMax.to("#joinButtonActive", 6, {delay: 2, autoAlpha:0}); TweenMax.staggerFrom("#hiddenButton", 2, {autoAlpha:0}); joinButtonActive.hide(); hiddenButton.show(); }, function(){ joinButtonActive.hide(); hiddenButton.hide(); button.show(); joinButton.show(); }); thank you very much, nick
-
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(); });
-
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(this, 2, {fill:"#000000"}) } // fadeBtnInTl({paused:true}), // TweenMax.to("#joinButton", 1, {autoAlpha:0}, 0) // TweenMax.to("#joinButtonActive", 1, {autoAlpha:1}, 0); // fadeBtnOutTl({paused:true}), // TweenMax.to(this, 1, {autoAlpha:0}, 0) // TweenMax.to(this, 1, {autoAlpha:1}, 0); var joinButton = $(".button #joinButton"), joinButtonActive = $("#joinButtonActive"), sButton = $(".button #simpleButton"), qButton = $(".button #qualityButton"), uxdButton = $(".button #uxdButton"), fadeBtnInTl = $(new TimelineMax()), fadeBtnOutTl = $(new TimelineMax()); $(function(){ $("#s").hover(function(){ joinButton.hide(), sButton.show(); }, function(){ sButton.hide(), joinButton.show(); }); $("#q").hover(function(){ joinButton.hide(); qButton.show(); }, function(){ qButton.hide(); joinButton.show(); }); //--- $(".box-uxd").hover(function(){ joinButton.hide(); uxdButton.show(); }, function(){ uxdButton.hide(); joinButton.show(); }); $("#xa-flip").hover(function(){ uxdButton.hide(); // joinButton.hide(); joinButtonActive.show(); }, function(){ joinButtonActive.hide(); joinButton.show(); }); });
-
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
-
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
-
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"> there is no lag/awkward animations at all! AND IT'S BROWSER FRIENDLY (Because we cannot hover over the SVG transparency 'holes'/'counter spaces'/'white space' etc. in all browsers) I will ask about the most simple way of adding a tween (or a few: opacity, ease/floating up/down effect) to the Diamond on hover of the "A"... This would then return to the previous state once mouse is NOT hovering on "X or A". As you can see my JS is lacking structure and some ideas are commented out. Currently the "flashing opacity" is on repeat but I'd like it to stop when not hovering on "A/X". EDIT: After playing/thinking about it - When hovering over the "A" (#a) tag you have to be touching the black SVG to activate hover, I would rather have the slight change of opacity be activated onComplete of the flip... Thanks for the input and I hope other's find this interesting/helpful! nick
-
Actually I just solved the hover issue on the "#x" in the JS with: $("#x, #a").hover(function(){ tl.play(); },function(){ tl.reverse(); })
-
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 problems (which it looks like there is a weird hover issue), I could try saving each letter out as an individual SVG but have them in line to look like 1 possibly? Appreciate the help and advice!
-
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 correct placement within the file. (I have tried 'cropping' the SVG of "X" and "A" but the position/location is off. Question: - can I set a rotation orgin point manually? or do you think I should even be using more JS/GSAP to accomplish these effects? *There are actually even more interactions I have thought up - however they can wait until this problem is resolved, Thanks for ANY & ALL help! (I haven't found many examples of SVG hover animations)
