GSAP BLUR TEXT REVEAL ON SCROLL - Elementor Wordpress Tutorial Flex Container

[@nk-WebWander]

Andrea, your work is pure magic! The effect you created is beyond praise. You have mastered Elementor and GSAP so skillfully, and I can't wait to see what you create next. Thank you so much!

[@andreebel3394]

Hey Andrea. The effect itself works well, but the words are simply cut off when there is a line break. Can you change this or code it so that the words stay together. You can also see it in your tutorial with the word 'quantum' which is cut off.

[@abdurrehmanbutt8920]

I always love your tutorials, you teaching style is very awesome.

[@Ammar_J]

Awesome Video!
I've started using Arc Browser after watching your video, and I am still figuring out how it can create a more productive environment for me as a designer. Could you please make a detailed video on how to use Arc, how to create the best environment as a designer, and recommend some extensions you use as a designer!
Thank You!

[@Jaljeerabgmi]

Love your tutorials ! learned most of things from your videos !

[@rahadianputra3745]

Wow! this is so cool, thanks teacher Andrea

[@andreaegli]

Thanks and you’re welcome! ☺️

[@erhamotionvideo7517]

thank you, this is the kind of GSAP I like

[@Zi0nneBLoeM]

Do you know by any chance if this is also possible for custom classes / headings? Because to use this on every H2, or H1 is a bit overkill for me! :) Great vid again.

[@andreaegli]

Yes BUT you will need to re=style the spans created dynamically. I've added the class of heading here but if you leave it like that, you will notice that your text is no longer styled.
span {
font-size: 3rem;
......
.....
whatever else you want to add
}
might affect other spans you have on the page tho...this is just a quick example, needs adjustment on a full blown site
document.addEventListener('DOMContentLoaded', function () {
gsap.registerPlugin(ScrollTrigger);
// Function to split text into spans
function splitTextIntoSpans(selector) {
const elements = document.querySelectorAll(selector);
elements.forEach(element => {
const text = element.innerText;
element.innerHTML = ""; // Clear existing content
text.split("").forEach(char => {
const span = document.createElement("span");
span.style.display = "inline-block";
span.style.opacity = "0";
span.style.filter = "blur(8px)";
span.style.transform = "translateX(-100px)";
span.innerText = char === " " ? "\u00A0" : char; // Non-breaking space for spaces
element.appendChild(span);
});
});
}
splitTextIntoSpans(".heading");
document.querySelectorAll(".heading").forEach(heading => {
gsap.fromTo(heading.querySelectorAll("span"), {
x: '-100%',
filter: 'blur(8px)',
opacity: 0,
}, {
x: '0%',
filter: 'blur(0)',
opacity: 1,
duration: 1.5,
ease: "power4.out",
stagger: 0.05,
scrollTrigger: {
trigger: heading,
start: "top 90%", // Adjust if necessary
end: "top 20%", // Ensures animation completes
toggleActions: "restart none none reset",
scrub: 1,
markers: false
},
});
});
});

[@Zi0nneBLoeM]

@@andreaegli Yes, so if I understand correctly, I have to CSS style a specific class (span in this case) to maintain the styling of the heading before?

[@andreaegli]

@@Zi0nneBLoeM correct!

[@Zi0nneBLoeM]

@@andreaegli Thanks for the quick responding, I'll try it out :)

[@DMLeBeau]

Awesome. I'm wondering why you added the HTML code in the 4th container? Does the location matter? Can it be placed in the same container as the text heading?

[@sameerpatelxyz]

🤩 amazing

[@andreaegli]

Welcome! 🤗

[@justwpbasic]

Works well but the word breaks and it doesn't split to the next line

[@nafiulhasanmehediL]

Where i found this code?

[@Jaljeerabgmi]

Hii there, i want a tutorial on something related to website i have a question can we make similar ? Please let me know how can i send it !