Underline the header css animation

Question

I have some div tags on the page and once they are in a viewport, I want them to animate in a certain way. I already got the 'in viewport' part working with waypoint.js so now I am stuck with the animation.

Basically, I want to have a grey underline on all h1 tags at all times. Once they are in view, I want a black line to run on top of that grey line from right to left and almost leave the scene afterwards, stopping at about 25% of grey line.

To demonstrate it, I've changed the effect to work on hover and as you can see, I've got the part when it runs through the grey line, but I'm stuck with the part when it should leave the scene (almost leave the scene - stopping at 25% of grey line):

HTML:

<div class="section-header">
  <span>Hello</span>
</div>

CSS:

.section-header {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 2em;
    letter-spacing: 5px;
    position: relative;
    text-align: center;

    > span {
        display: inline-block;
        position: relative;
        border-bottom: 1px solid #ccc;
        &:before {
            content: "";
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -1px;
            right: 0;

            background-color: #000;
            visibility: hidden;
            -webkit-transition: all 0.9s ease-in-out 0s;
            transition: all 0.9s ease-in-out 0s;
        }
        &:hover {
            &:before {
                visibility: visible;
                width: 100%;
            }
        }
    }

}

http://codepen.io/anon/pen/RWoxBv

Is this possible to do in CSS at all? Or should I use Javascript for it?

To demonstrate the animation further, imagine that this is the black line:

           - (starts from right hand side and goes to left)
          --
         ---
        ----
       -----
      ------
     -------
    --------
   ---------
  ----------
 -----------
------------ (point when it covers the grey line and starts to 'leave the scene') 
-----------
----------
---------
--------
-------
------
-----
----
--- (stopping there)

Please post relevant code in the question itself. Questions should be self contained and we shouldn't have to go off site to review your problem — charlietfl, Sep 27 '15 at 23:46
*"leave the scene ... almost leave the scene"*? Can you please be more specific? — Roko C. Buljan, Sep 27 '15 at 23:48
Updated. I hope you can understand what I'm trying to achieve. :) — Bravi, Sep 27 '15 at 23:56

score 1 · Accepted Answer · edited May 23 '17 at 10:27

So animate an element from left 100% to left -75% (= 25% visible!)
jsBin demo playground

Here's a small nice example that uses a small jQuery plugin taken from here and a bit of standard CSS:

/**
 * inViewport jQuery plugin by Roko C.B. stackoverflow.com/questions/24768795/
 *
 * Returns a callback function with an argument holding
 * the current amount of px an element is visible in viewport
 * (The min returned value is 0 (element outside of viewport)
 * The max returned value is the element height + borders)
 */
;(function($, win) {
  $.fn.inViewport = function(cb) {
    return this.each(function(i,el) {
      function visPx(){
        var elH = $(el).outerHeight(),
            H = $(win).height(),
            r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
        return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : (b<H?b:H)));  
      }
      visPx();
      $(win).on("resize scroll", visPx);
    });
  };
}(jQuery, window));



// Let's rock!
$("h1 span").inViewport(function(px){
  $(this).toggleClass("animateLine", !!px);
});

p{height:900px;}/*FOR DEMO ONLY*/

h1{
  text-align:center;
}
h1 span{
  display:inline-block;
  position:relative;
  overflow:hidden;
}
h1 span:after,
h1 span:before{
  content:"";
  height:1px;
  width:100%;
  position:absolute;
  bottom:0px;
  left:0;
  transition: 3s;
}
h1 span:before{
  background:#ccc;
}
/* We'll animate this one to -75% */
h1 span:after{ 
  background:#000;
  left:100%;
}
h1 span.animateLine:after{
  left: -75%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><span>This is title 1</span></h1>
<p>1 Scroll down to find more titles</p>
<h1><span>This is title 2</span></h1>
<p>2 Scroll down to find more titles</p>
<h1><span>This is title 3</span></h1>
<p>3 Scroll down to find more titles</p>
<h1><span>This is title 4</span></h1>
<p>4 Scroll down to find more titles</p>
<h1><span>This is title 5</span></h1>
<p>5 Scroll down to find more titles</p>

Basically set the pseudo :after to initial 100% left, and trigger the CSS3 class that will apply the left -75% transition using the jQ plugin like in the demo.

https://stackoverflow.com/a/26831113/383904
CSS3-Animate elements if visible in viewport (Page Scroll)

I was actually doing everything right, except the `left` bit. I was applying the class and everything, I just couldn't figure out the actual animation. Thanks again! :) — Bravi, Sep 28 '15 at 00:39
@Bravi well, I don't know how it's in your demo, but in this example it'll animate the *line* even if you return (scrollUp) to the previous headings. ;) If you don't want to- than you can do simply: `if(px) $(this).addClass("animateLine");` Happy coding — Roko C. Buljan, Sep 28 '15 at 00:41

Underline the header css animation

1 Answers1