Animated underline on H2s

Hi Johan,

You can try adding class add-underline-animation to the class list of the Headline Block, and then add this CSS:

h2.add-underline-animation:after {
    height: 10px;
    content: "";
    background-color: #dd0f0f;
    position: absolute;
    left: 0;
    top: 60%;
    z-index: -1;
    width: 100%;
    animation: 1s ease-out 0s 1 fillInFromLeft;
}

h2.add-underline-animation {
    position: relative;
    z-index: 20;
}

@keyframes fillInFromLeft {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

You can modify the values to your preference.

That is perfect. But how do I do to start the animation when you scroll to the section?
And, on mobile it does not fill under all the words, only the last line.

Hi there,

that site uses Javascript for its animated underlines.
And this is the Script it runs:

/* JS for header underline */

// Options docs: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options
const options = {
    root: null, // use the document's viewport as the container
    rootMargin: '0px', // % or px - offsets added to each side of the intersection
    threshold: 0.5 // percentage of the target element which is visible
}

// Callback docs: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Targeting_an_element_to_be_observed
let callback = (entries) => {
    entries.forEach(entry => {

        // If entry (box) is visible - according with the params set in <code>options</code>
        // then adds <code>isVisible</code> class to box
        // otherwise removes <code>isVisible</code> class

        if(entry.isIntersecting) {
            entry.target.classList.add('animate-underline');
        } else {
            entry.target.classList.remove('animate-underline');
        }

    });
}

// Create the intersection observer instance by calling its constructor and passing it a
// callback function to be run whenever a threshold is crossed in one direction or the other:
let observer = new IntersectionObserver(callback, options);

// Get all the <code>.box</code> from DOM and attach the observer to these
document.querySelectorAll('.underline:not(.a-underline)')
    .forEach(animateUnderline => { observer.observe(animateUnderline) });

Add that to your site inside some <script></script> tags using a wp_footer hook in a GP Hook Element.
And then add the underline CSS class to any Block you want to observe.
When a block is in viewport the script will add the animate-underline class to the block, which can then be used for your animation CSS.

Thanks David!
So, I removed the CSS given from Fernando.
I added the script to a hook and the display rule to "Front Page".
Then I added "underline" to the CSS in the editor to the headline block. Nothing happens..
I guess I am missing something here.

You still need the CSS from Fernando, but replace the class add-underline-animation with animate-underline.

Thanks Ying. I tried that, but it still doesn't work.
What have I missed?

Thanks for all the help. You guys are super!

Remover Fernandos CSS and add this:

.underline {
    display: inline-block;
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg,#ff0000 0%,#ff0000 100%);
    background-size: 0% 18%;
    background-position: 0 89%;
    transition: background-size .8s ease-in-out;
    margin: 0 -3px;
    padding: 0 3px;
    font-style: normal;
    will-change: background-size;
}

.underline:is(.animate-underline) {
    background-size: 100% 18%!important;
    transition-delay: .4s!important;
}

NOTES:

This line:
display: inline-block;
This makes it so the underline spans only the text.
It however means you can't center the headline, you would need to text align center the container it is in.

This line:
background-image: linear-gradient(180deg,#ff0000 0%,#ff0000 100%);
Change the 2 instances of #ff0000 to your brand color.

Thanks David. Removed Fernandos CSS and added yours. Added "underline" as a Additional CSS Class on the headline block. Nothing still happens. Sorry, I thought this was going to be an easy one!

How did you add the CSS?

Apperance - Customize - Additional CSS

It seems you've added a piece of PHP code into the additional CSS field, can you remove that PHP code?

For how to add PHP code:https://docs.generatepress.com/article/adding-php/

Wehey! That was it. Thanks!
But, when I look at the animation on my mobile it is just one large underline below the heading. It doesnt underlines under the different heading words. Any way to fix that?

Because the class is added to the entire H2 as per your request in your original topic.

If you only want the underline add to certain words, select the word and set it to highlight:
https://www.screencast.com/t/jdjAROEN8Lj

Then change the CSS selector .underline to:.underline mark, .underline:is(.animate-underline) to .underline:is(.animate-underline) mark.

Hi! Thanks. We are getting there. If I highlight all the words, I still only get the underline below on mobile.
Works on desktop!