c-bro c-bro - 1 year ago 73
Javascript Question

Height Animation Hiding :Before Pseudo Element

I'm attempting to create an animated timeline. I'm using scroll reveal to trigger the animation when the timeline comes into view. Each timeline entry has a left border and a pseudo element :before associated with it. The :before element is a dot that marks the beginning of each timeline entry. When animating the height of the divs that contain the border, the :before pseudo element overflow is cut off. I've set overflow to visible with the !important flag but that doesn't seem to do the trick. Does anyone know why the :before pseudo element is being cut off? Thanks for the help!

$(function() {
$('.tml-content h2').css("opacity", 0);
$('.tml-content p').css("opacity", 0);
var height = $('.timeline').height();
window.sr = ScrollReveal();
var config = {
// 'bottom', 'left', 'top', 'right'
origin: 'bottom',

// Can be any valid CSS distance, e.g. '5rem', '10%', '20vw', etc.
distance: '0px',

// Time in milliseconds.
duration: 1000,
delay: 0,

// Starting angles in degrees, will transition from these values to 0 in all axes.
rotate: {
x: 0,
y: 0,
z: 0

// Starting opacity value, before transitioning to the computed opacity.
opacity: 1,

// Starting scale value, will transition from this value to 1
scale: 1,

// true: reveals occur every time elements become visible
// false: reveals occur once as elements become visible
reset: false,

// Change when an element is considered in the viewport. The default value
// of 0.20 means 20% of an element must be visible for its reveal to occur.
viewFactor: 0.0,

// Callbacks that fire for each triggered element reveal, and reset.
beforeReveal: function(domEl) {},
beforeReset: function(domEl) {},

// Callbacks that fire for each completed element reveal, and reset.
afterReveal: function(domEl) {animateHeight(domEl)},
afterReset: function(domEl) {}
sr.reveal('.tml-line', config, 3000);

function animateHeight(domEl) {
var height = $(domEl).height();
$(domEl).css("border-left", "1px solid #cf1e27");
height: height
}, 2000, function() {
$(domEl).find('h2').animate({"opacity": 1}, 1000);
$(domEl).find('p').animate({"opacity": 1}, 1000);

.filler {
height: 1200px;
width: 100%;
background-color: azure;

.timeline {
height: 100%;
margin: 16px auto;
margin: 1rem auto;
border-radius: 1rem;
padding: 32px 24px;
padding: 2rem 1.5rem;
overflow: visible !important;

.timeline .tml-content {
-webkit-transform: translate(0, -2rem);
-ms-transform: translate(0, -2rem);
transform: translate(0, -2rem);
padding: 24px;
padding: 1.5rem;
overflow: visible !important;

.timeline .tml-content.fg-timeline-active:before {
content: "";
width: 8px;
width: 0.5rem;
height: 8px;
height: 0.5rem;
background: #fff;
border-radius: 0.5rem;
border: 4px solid #cf1e27;
position: absolute;
-webkit-transform: translate(-2rem, 0.5rem);
-ms-transform: translate(-2rem, 0.5rem);
transform: translate(-2rem, 0.5rem);
z-index: 9999;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal@3.3.2/dist/scrollreveal.min.js"></script>
<div class="filler">

<div class="timeline">
<div id="test" class="tml-line">
<div class="tml-content">
<p>Sample text...</p>
<div class="tml-line">
<div class="tml-content">
<h2>1900 - 2000</h2>
<p>Sample text...</p>
<div class="tml-line">
<div class="tml-content">
<p>Sample text...</p>
<div class="tml-line">
<div class="tml-content">
<p>Sample text...</p>
<div class="tml-line">
<div class="tml-content">
<p>Sample text...</p>

Answer Source

You can probably answer your own question but I'm posting an answer anyway. As you saw all you need is to set the overflow style to the tml-line class.

.tml-line {
   overflow: visible !important;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download