I have a challenge with animating div tags once they come into view on the page. Thanks to waypoint.js, I have successfully achieved the 'in viewport' trigger, but now I need help with the animation part.
Specifically, I am looking to add a grey underline to all h1 tags at all times. When these tags become visible, I want a black line to smoothly slide from right to left, covering the grey line, and then almost exit the scene, halting at approximately 25% of the grey line.
In trying to demonstrate this effect, I modified it to work on hover so you can see the progress. However, I am struggling with getting the black line to stop at the 25% mark on the grey line:
Here is an example of the HTML:
<div class="section-header">
<span>Hello</span>
</div>
And here is the 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%;
}
}
}
}
Check out the code in action here: http://codepen.io/anon/pen/RWoxBv
Do you think achieving this effect purely in CSS is possible, or should I resort to using Javascript for the animation?
To better visualize the animation process, imagine the black line moving like this:
- (starts from right hand side and goes to left)
--
---
----
-----
------
-------
--------
---------
----------
-----------
------------ (covers the grey line and starts to 'leave the scene')
-----------
----------
---------
--------
-------
------
-----
----
--- (stops here)