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!
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!
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.
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 }, }); }); });
@@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?
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?
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.
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!
I always love your tutorials, you teaching style is very awesome.
Wow! this is so cool, thanks teacher Andrea
Thanks and you’re welcome! ☺️
Love your tutorials ! learned most of things from your videos !
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!
thank you, this is the kind of GSAP I like
🤩 amazing
Welcome! 🤗
Works well but the word breaks and it doesn't split to the next line
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.
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
},
});
});
});
@@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?
@@Zi0nneBLoeM correct!
@@andreaegli Thanks for the quick responding, I'll try it out :)
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?
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.
Where i found this code?
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 !