Highlight Headings as you Scroll with no extra plugin

[@pixelgap]

Thank you Imran

[@gustavomedina2224]

perfect and love it

[@websquadron]

So easy to do!

[@phkoon]

That's great, I was just going to an old video from Kevin Powell to gather this, but you just popped up with the solution right away, thanks!
*Edit:*
I just checked Kevin's video in question and he manages to achieve this with CSS only!
If it's of your interest to take a look at it, here's the name:
*Can I copy this text reveal scroll effect with CSS-only?*
By the way, do you ever use any smooth-scroll?

[@SuperABOALAA]

love the effect !! thanks

[@estate0007]

No GSAP is no positive argument for me as the GSAP JS code most of the time is shorter and easier to comprehend imho. Would be cool, if you can make some GSAP stuff in the future. This library has so many possibilities and you get great effects with just a few lines of code.

[@websquadron]

Agreed. Nothing against GSAP but this is another way of doing it without GSAP

[@meisterleise]

@@krowest I agree. GASP with elementor from websquardon would be very nice!

[@pamelawillover9618]

Brilliant!

[@BeMasterWP]

Super!!! thank you for this tutorial

[@meisterleise]

Thank you! Very cool. 👍
I have tinkered a bit with the code. Now I just need 1 js for all text lines and just 1 css. But I am afraid I can't share it here, because yt would delete it.

[@websquadron]

You can add codes in the reply.

[@meisterleise]

@@websquadron I know, but mostly YT does delete it. I will try now again:

[@meisterleise]

.color-change-1 .elementor-heading-title, .color-change-2 .elementor-heading-title {
position: relative;
display: inline-block;
background: linear-gradient(to right, rgba(129, 162, 112, 1) 0%, rgba(129, 162, 112, 1) 49%, rgba(129, 162, 112, 1) 50%, #292826 60%, #292826 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 450% 450%;
background-position: 100% 0;
transition: background-position 0s;
line-height: 1.5!important; /* Adjust line height to give more space for descenders like 'y' */
}
document.addEventListener('DOMContentLoaded', function() {
const headings = document.querySelectorAll('.color-change-1 .elementor-heading-title');
const headingData = Array.from(headings).map(heading => ({
element: heading,
offsetTop: heading.getBoundingClientRect().top + window.pageYOffset,
height: heading.offsetHeight
}));
window.addEventListener('scroll', function() {
const scrollPosition = window.pageYOffset + (window.innerHeight * 0.90); // starts at lower 15% of the viewport height
headingData.forEach(data => {
const distanceFromHeading = scrollPosition - data.offsetTop;
const percentage = Math.min(Math.max((distanceFromHeading / ((window.innerHeight + data.height) / 2)), 0), 1); // 5 = speed, lower to slow down, or increase to speed up
data.element.style.backgroundPosition = `${100 - (percentage * 100)}% 0`;
});
});
});

[@1venom-r6r]

Yeahhh thanks

[@serdimay7]

I have been hearing a lot about gsap, where do you go to learn about it?

[@websquadron]

Andrea Egli

[@honeypeadigital]

I'm thinking it would be more beneficial to learn gsap instead of not learning and simply copying and posting codes without understanding what is going on.
I have an issue where I'm trying to solve a thousandth separator and the code I found for it didn't work. Someone offered to fix it and with the fix, u so don't know what it does nor how to relate it on other sites.

[@websquadron]

Agreed but you can stick the code into AI to explain it. This is just another way of how get a solution :) Plus the code is not hidden away or requiring further investment. I prefer to make videos that more can use inside their site easier than before. Give it a go.

[@DavidGawainMiles]

Can you make a Bricks version too?

[@whatamiwitnessing1003]

You dont need a bricks version.
Just read the css and js, then change the classes.

[@websquadron]

Exactly !

[@osta.design]

how can i make it flow right to left?

[@websquadron]

Not at my machine, but stick the code into ChatGPT and it shoul advise on the changes.