CSS3 button transition spring effect help

[tomtom92]

Hello everyone!

So I am writing my own site and I am having a bit of difficulty getting a transform/translation effect to work. I wanted to have a few peaking tabs on the side of my page that would pop out when hovered over. They would be used for social links like facebook and whatnot.

As of now I hav a descent effect but it isn’t what I want. The effect is similar to this one:
http://tympanus.net/Tutorials/AnimatedButtons/index4.html

When I scroll over the box all three of the peaking links come out (at slightly different times) and then have a little effect that makes the logos open out the other way from where the ‘arrow’ is. That is just a fun effect that I wanted to try.

*My question is:
How can it get it so that the arrow moves out and then back in a little as if it had a bounce/spring effect of going to far. It’s a common effect (maybe not in css) that looks good. Can anyone suggest how to do this or if there is a tutorial on it. As of now I have it set up just like that link where the padding of the non-moving box increases ‘pushing’ the arrow away.

Let me know if this is confusing and maybe I can get a demo of what I have thus far.
Thanks!

[Taufik Nurrohman]

As far as I know, the cubic-bezier() transition timing function is limited only to the numbers 0 – 1. But this works for the spring effect :D

-webkit-transition:width 0.4s cubic-bezier(0,2,0,0);

-moz-transition:width 0.4s cubic-bezier(0,2,0,0);

-ms-transition:width 0.4s cubic-bezier(0,2,0,0);

-o-transition:width 0.4s cubic-bezier(0,2,0,0);

transition:width 0.4s cubic-bezier(0,2,0,0);

http://jsfiddle.net/tovic/kw7LD/12/

[tomtom92]

Thanks guys, I will try this when I get time and when I get back to my code. Just to clarify, by spring effect I mean have the ‘arrow’ shoot out, like it does in the demo, a little far and then come back just a bit. Then when it is not hovered over anymore, it just simply retracts back (I guess linear).

All in all there will be three movement effects:
1) Have the ‘arrow’ slide out to reveal a blank background *I have this done* with a slight spring back effect
2) Do that slide at slightly different times for all three buttons *I have this done*
3) Have the social link button slide out the opposite direction from the arrow *I have this done*

Thanks again!

[Author]

Posts