The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS3 button transition spring effect help

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #38847

    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:

    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.

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


    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!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.