Vanilla javaScript: Text Reveal Effect On Scroll

[@deepak8586]

I have been looking for this all over youtube thanks for sharing!!

[@aleksejsskurjats6394]

Thanks man for sharing your knowledge! 🚀💥

[@kelligart4847]

Another great tutorial, thanks Conor !

[@danielmosca1653]

great! thank you!!
how could I do if I'd add a blur effect?

[@MatteoMastrototaro-q6o]

Thank you so much for this tutorial, such a great animation. But I'm having trouble because it slows my website a lot, it seems like lagging when reach the point with the animated paragraph. Do you have any suggestions to make it lighter?
EDIT: I solved the problem by splitting paragraphs by words and not by a single character. Much lighter!
To do that just change
→ let pArray = paragraph.textContent.split('');
to this
→ let pArray = paragraph.textContent.split(' ');
And I added padding-right to span style, to simulate blank spaces between words.
Hope this will be useful to someone stuck in the same situation I was.

[@howuseehim]

What is your theme ? Thanks for the tuts very useful stuff as usual

[@ConorBailey]

Thanks! its GitHub Dark theme in VS Code..

[@WorshipMinistryTraining]

Can I make it one word at a time, instead of one character at a time?

[@guru-xn9yp]

thanks a lot man! what's that vscode theme btw?

[@ConorBailey]

Thanks. Its GitHub Dark theme

[@guru-xn9yp]

@@ConorBailey much appriciated, keep your awsome tuts coming 🙏

[@tomsgxdv2528]

thank you for this great work!
Can you help me, I'm having trouble changing the opacity of the text lower in the screen (top position about 50%) because it causes reading problems. (I don't know what values to change)
THANK YOU

[@truowng]

Thanks for sharing ❤

[@ggwp185]

So u can now do this only using CSS.
Use animation timeline view

[@ConorBailey]

Nice! Will look into this!

[@kravitz78]

@@ConorBailey not gonna work in safari

[@TonyMathew-j5p]

where does span added in html

[@Babbili]

so nice

[@Uncaught_in_promise]

what about mobile devices? does it work on mobile?

[@ConorBailey]

Hi. Yes I’ve tested this on mobile and it works great!

[@hail816]

Can you create a tutorial on webgl image hover effects without using plugins?

[@bewise2023]

is there any code link
my this code is not working

[@bewise2023]

let paragraphs = [...document.querySelectorAll('p')]
let spans = [];
paragraphs.forEach(paragraph => {
let htmlString = '';
let pArray = paragraph.textContent.split('')
for(let i = 0;i 1 ? 1 : opacityValue.toFixed(3);
spans[i].style.opacity = opacityValue;
}
}
}
window.addEventListener('scroll', () => {
revealSpans();
})
revealSpans();

[@ConorBailey]

I can post it later. What error are you receiving? I can try to help.

[@evanmatthews4097]

@@ConorBailey Drop us the code, bro!

[@dcampagne1]

@@ConorBailey post it! don't be shy

[@dcampagne1]

@@evanmatthews4097 let paragraphs = [...document.querySelectorAll('p')];
let spans = [];
paragraphs.forEach(paragraph => {
let htmlString = '';
let pArray = paragraph.textContent.split('');
for (let i = 0; i < pArray.length; i++) {
htmlString += `${pArray[i]}`;
}
paragraph.innerHTML = htmlString;
});
spans = [...document.querySelectorAll('span')];
function revealSpans() {
for (let i = 0; i < spans.length; i++) {
if (spans[i].parentElement.getBoundingClientRect().top < window.innerHeight / 2) {
let { left, top } = spans[i].getBoundingClientRect();
top = top - (window.innerHeight * 0.2);
let opacityValue = 1 - ((top * 0.01) + (left * 0.001));
opacityValue = opacityValue < 0.1 ? 0.1 : opacityValue > 1 ? 1 : opacityValue.toFixed(3);
spans[i].style.opacity = opacityValue;
}
}
}
window.addEventListener('scroll', revealSpans);
revealSpans();