[Support request] Animated underline on H2s

Home Forums Support [Support request] Animated underline on H2s

Home Forums Support Animated underline on H2s

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #2323221
    Johan

    Hi guys
    This guy, https://www.samunderwood.co.uk/, built some cool underlining on his headers.
    I would like to have this on my landing page on the H2s. How do do I this?

    Thx.

    #2323230
    Fernando
    Customer Support

    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.

    #2323232
    Johan

    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.

    #2323303
    David
    Staff
    Customer Support

    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.

    #2323908
    Johan

    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.

    #2323919
    Ying
    Staff
    Customer Support

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

    #2324301
    Johan

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

    Thanks for all the help. You guys are super!

    #2324396
    David
    Staff
    Customer Support

    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.

    #2325021
    Johan

    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!

    #2325023
    Ying
    Staff
    Customer Support

    How did you add the CSS?

    #2325026
    Johan

    Apperance – Customize – Additional CSS

    #2325028
    Ying
    Staff
    Customer Support

    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/

    #2325032
    Johan

    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?

    #2325051
    Ying
    Staff
    Customer Support

    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.

    #2325072
    Johan

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

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.