Jump to content

Add Animated Line Between 2 Text

Recommended Posts

  • Replies 3
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi Tuanphan, thank you for your reply! 

I had achieved this with some code injection and CSS but it has stopped working for some reason: 

<script>
document.addEventListener("DOMContentLoaded", function () {
    var targetElement = document.querySelector(".block-yui_3_17_2_1_1699612047731_7222");
    var initialWidth = 0;

    window.addEventListener("scroll", function () {
        var distanceFromTop = targetElement.getBoundingClientRect().top;

        if (distanceFromTop < window.innerHeight && initialWidth < 100) {
            initialWidth += 1; // You can adjust the increment value
            targetElement.style.width = initialWidth + "%";
        }
    });
});
</script>

CSS

/**KPG LINE**/

#block-yui_3_17_2_1_1699612047731_7222 {

    width: 0%;

  margin-left: 0; /* Initial margin */}

Any idea what is going wrong?

 

Thanks

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.