SVG Hover Animation

[squxd]

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)

See the Pen wGLeMZ by squxd (@squxd) on CodePen.

[Carl]

Hi and welcome to the GreenSock forums, 

 

as i understand it you can create a little Timeline to sequence the animations

 

var tl = new TimelineMax({paused:true})

tl.to("#x", 0.5, {scaleY:0, transformOrigin:"50% 50%", ease:Linear.easeNone})
  .to("#diamond", 1, {yPercent:-100}, 0)
  .from("#a", 0.5, {scaleY:0, transformOrigin:"50% 50%", ease:Linear.easeNone}, "-=0.5")

tl.timeScale(2);

$("svg").hover(function(){
  tl.play();
},function(){
  tl.reverse();
})

http://codepen.io/GreenSock/pen/vGqZdQ?editors=0010

 

I noticed there were some CSS transitions in there. I didn't know what they were for so I removed them.

It's not recommended to mix CSS transitions or animations with GSAP as they will compete for control of the properties being animated and cause a big mess. 

[Carl]

oh, and I did scaleY tweens as the SVG spec does not support any 3D inside an SVG on <g>, <path>, <circle> etc. Chrome sort of lets you get away with it but the other browsers not so much.

[squxd]

Thanks Carl!

 

Would you foresee any problems if I changed the hover to be applied to only the (#x) part of the svg?

 

See the Pen wGLeMZ by squxd (@squxd) on CodePen.

(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!

[squxd]

Actually I just solved the hover issue on the "#x" in the JS with:

 

$("#x, #a").hover(function(){
  tl.play();
},function(){
  tl.reverse();
})

[squxd]

UPDATE:

 

I have come across a few examples  (one being: 

See the Pen iCeFl by MandyMadeThis (@MandyMadeThis) on CodePen.

 - that uses a similar idea I had mentioned earlier - hovering on individual SVG's and <div>'s).

 

From here, I updated my Codepen (

See the Pen wGLeMZ by squxd (@squxd) on CodePen.

) 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

Edited May 20, 2016 by squxd

[Carl]

you're making good progress.

 

Good job on creating the new timeline for the diamond opacity.

If I understand correctly, what you want to do is a little tricky, but I think you will get the desired result if you tween the progress() of the tldiamond back to 0 when you mouseleave like

 

$("#a").hover(function(){
  tldiamond.play();
},function(){
  tldiamond.pause();
  //tween the progress of the tldiamond back to 0 (beginning of current iteration)
  TweenLite.to(tldiamond, 1, {progress:0})
})

 

http://codepen.io/GreenSock/pen/ZWdmWQ?editors=0010

 

I added rotation just to make the result more noticeable

[squxd]

Hey thanks Carl - 

 

See the Pen wGLeMZ by squxd (@squxd) on CodePen.

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

[squxd]

Onward & Upward!

 

See the Pen yOmOxr by squxd (@squxd) on CodePen.

 

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

[Carl]

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?

 

 

 

 

Unless I'm misunderstanding the question, It seems you already have a decent handle on timelines so I think building a timeline with all those animations should be pretty straightforward.  

[squxd]

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.

See the Pen RaXMmE by squxd (@squxd) on CodePen.

$("#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();
    });
});

[squxd]

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();
    });