Hi Andrea! It took just one video for me to hit the subscribe button 🙂Absolutely great stuff. I'm not sure if anyone else has this issue... but when i'm trying this tutorial out, the highlight is applied to the whole text box and not individual lines. Could you maybe advise me on what the reasons could be?... and how to work around it. Appreciate your help 🙂
Hey! Andrea, first of all I really love you're contents they are very impressive. I really don't know the issue but I can't change the text color. It's blue but it should be white as the code.
Looks great! Is there a way to do this letter by letter when there is a paragraph? rather than applying the effect on the entire paragraph? That would be great if there's a way to do it!
hey, can you try to create the following effects which are on the cuberto website? 1. That magnetic effect upon hovering the menu in the top right corner with cursor change. 2. When we hover on the carousel cursor changes to drag and we should able to drag it Please make an exact or similar effect to it. 3. Button hover effect. I found the exact channel that was looking for your work is awesome. Thank you
Hi Andrea! When I do this, all the heading elements on the page also has the effect (a bit buggy) could there be an update on code or? Just wondering! Thank you, you're the best ~
Andrea!! this works if your heading is only 1 line, but usually its more common to use headings of 2 or 3 lines, its any way to fix the code and make it work in that case? would love itttttt
Hey! The code is not broken, that’s how it was intended to work 😉 I will find a solution for your use case, I know that’s more common but until then, this is it
Hi Andrea , This code is not working for me , can you please guide, In comment share the detail, let me know how can i share the details of what i applied,
Thanks for the amazing video. Would be great if you could share with me a site where I can find those codes for more effects? Like codepen just for gsap animations
Hey David, thank you! I wish there was a site like that but to my knowledge, there isn't. I always go on codepen but unless you know how to code a bit, will be hard to implement. The GSAP community on the official website of GSAP has some great solutions too. I do a lot of 'leg' work to find them, test them and implement so that they work with elementor.
Hey this was great help. I was able to achieve in wordpress what people are doing on webflow with text split and uncovering each line character by character using a mask which is a bit darker then the text which makes it look like this. its the same effect but animation is different. if anyone wants to know let me know ill share its code.
@@andreaegli thank you for such good videos. your channel has helped me alot learn about gsap and wordpress. so talking about the code i was able to make it work with the elementor heading title but was unable with elementor text editor. so i took the heading icon and wrote the text i wanted with a smaller text size so it seems like a paragraph. The class will be "split-lines" for the heading text. You dont need any other html structure other then adding text into elementor heading text. The (.line and .line-mark) html structure have been made within javascript. so nothing else is needed. Just add the html icon and paste this code. you can play around with the css line-mask options for opacity and background color to match your websites background. (((((((YOU MIGHT WANT TO DELETE THE COMMENTS IN THE CODE I HAVE LEFT BEFORE RUNNING IT)))))))) .line { position: relative; } .line-mask { position: absolute; top: 0; right: 0; background-color: #02061D; opacity: 0.65; height: 100%; width: 100%; z-index: 2; } (((((( OVERHERE I HAVE ADDED THE SPLIT-LINES CLASS WITH ELEMENTOR HEADING TITLE CLASS TO APPLY THE EFFECT ON IT))))))))))))))))) document.addEventListener("DOMContentLoaded", function() { let elementsToSplit = document.querySelectorAll(".split-lines .elementor-heading-title"); let instancesOfSplit = [];
// Split the text up function runSplit() { elementsToSplit.forEach((element, index) => { ((((((SPLITING TEXT HERE))))))) instancesOfSplit[index] = new SplitType(element, { types: "lines, words" }); });
document.querySelectorAll(".line").forEach(line => { line.insertAdjacentHTML('beforeend', ""); ((((((((LINE-MASK DIV MADE HERE)))))))) }); } runSplit(); // Update on window resize let windowWidth = window.innerWidth; (((((((TEXT RESIZE ON DIFFERENT SCREEN SIZE)))))) window.addEventListener("resize", function() { if (windowWidth !== window.innerWidth) { windowWidth = window.innerWidth; elementsToSplit.forEach((element, index) => { instancesOfSplit[index].revert(); }); runSplit(); createAnimation(); } }); gsap.registerPlugin(ScrollTrigger); function createAnimation() { document.querySelectorAll(".line").forEach(line => { (((((ANIMATION OPTIONS HERE)))))) let tl = gsap.timeline({ scrollTrigger: { trigger: line, start: "top center", end: "bottom center", scrub: 1 } }); tl.to(line.querySelector(".line-mask"), { width: "0%", duration: 1 }); }); } createAnimation(); });
yes! like this: const textElements = gsap.utils.toArray('.title, h1'); .title - is the class you set and h1 must be the html tag for your heading. if you're using a p, set it to p in the code
Hello Andrea, Excellent work thank you for sharing it. It works great on computer but it is not responsive on mobile phone (iphone). Any chance on helping me to fix that?
Thank you so much for all your videos, It works for me, but my site is RTL language, how to start this effect from right, I tried,,(to left) but didn't work, Thanks
Hello Andrea! Comment about cursor video I appreciate your excellent tutorials, as always. Please keep up the great work! I have a question: How can I add classes so that when I hover over a video, it displays "play," and when I hover over a contact element, it shows "let's talk"? Thank you!
thank you for this great tutorial. I'm trying to use this script revealing a bodytext. Now everything gets revealed at once. I'm trying to reveal it word for word. Or by character. I know I need to change the javascript, but im not to familiar with it. Tried different things without result. Anybody here any suggestions?
Hey Andrea-thanks for the awesomeness!! I was looking for this for a long time.... Just a question: can we apply this effect from top to bottom? Like on a text with more rows...
Thank you 😊 yup, I’m covering that briefly in this video FIXED SCROLL IMAGE GALLERY WITH GSAP & SMOOTH SCROLL (LENIS) - Elementor container edition czcams.com/video/f-avuNMG5as/video.html
If the code targets a specific element on a certain page, I prefer to have the code on that said page. I just find it easier to maintain, especially if you add a lot of code snippets to a website. Personal preference I guess...
You guys have been asking for an effect like this for some time now...here it is, more or less hope you find it useful!
Can I suggest an idea for future tutorials? czcams.com/video/xEkbMs6BR88/video.html
I'm Brazilian, and your content is incredible. Thank you very much for sharing your knowledge with us 💙
Hi Andrea!
It took just one video for me to hit the subscribe button 🙂Absolutely great stuff.
I'm not sure if anyone else has this issue... but when i'm trying this tutorial out, the highlight is applied to the whole text box and not individual lines. Could you maybe advise me on what the reasons could be?... and how to work around it.
Appreciate your help 🙂
im collecting some of your vids so that I can use them :)
Ok, use them for what?
Amazing. I have been trying to do this but couldn’t. Thank you for the tutorial!
Thank you and you’re welcome ☺️
amazing
Hey! Andrea, first of all I really love you're contents they are very impressive. I really don't know the issue but I can't change the text color. It's blue but it should be white as the code.
always you are hero b/c always you are my solution🎉❤❤❤❤❤❤❤
I´m in love with this chanel. Thank you so much Andrea for your content, is the best of the best.
Wow, thank you so much, Ricardo and you are very welcome😀
you're a life saver... thank you
Glad it helped & you're very welcome!😁
You are amazing. I really love your tutorials. Thank you
Well, this looks amazing! 🥰
🤓
very professional work
Looks great! Is there a way to do this letter by letter when there is a paragraph? rather than applying the effect on the entire paragraph? That would be great if there's a way to do it!
Can be done but you need to write different code. I might do that at some point
Meu deus que incrível! Obrigada pelo vídeo!!! 💖
You are very welcome, Amanda! ☺️
hey, can you try to create the following effects which are on the cuberto website?
1. That magnetic effect upon hovering the menu in the top right corner with cursor change.
2. When we hover on the carousel cursor changes to drag and we should able to drag it Please make an exact or similar effect to it.
3. Button hover effect.
I found the exact channel that was looking for your work is awesome. Thank you
welcome back Andrea !
Thank you, Teo!
Hi, the effect does not work on the other section. Can you please let us know the reason?
Hey! What other section? Explain exactly how you implemented it because it makes a big difference 😉
Level 🔥
Thank you !!
You're welcome!
Great video! Curious, what adjustments can be made to add the scrolling effect to the individual words instead of the paragraph 🤔
Thank you 😊 a complete different code. It’s in my list to do 😉
@@andreaegli Notifications on! ;)
@@andreaegli Website where an example can be found, I tried mimicking the CSS, unsuccessful 🙃
Superrrrrr! 😮👏 👏 👏 👍❤️🥰🥰
🤓
Thank u so much🙏🌹
You’re welcome 😇
Hi Andrea! When I do this, all the heading elements on the page also has the effect (a bit buggy) could there be an update on code or? Just wondering! Thank you, you're the best ~
Hey! Are all your headings in the same container where your effect is taking place? From my tests, that's the only way this would happen. Thank you :D
Maravilhoso, eu precisava muito disso!
So happy to hear that you like this ☺️
awesome
Is it posssible to make the animation vertical? Would be great for longer headings
Andrea!! this works if your heading is only 1 line, but usually its more common to use headings of 2 or 3 lines, its any way to fix the code and make it work in that case? would love itttttt
Hey! The code is not broken, that’s how it was intended to work 😉 I will find a solution for your use case, I know that’s more common but until then, this is it
@@andreaegli yes of course it’s not broken ! Didn’t say that. This works perfect for one line but would love when you have more that 1 thanks a lot
@@zafit02 you said fix the code that’s why I said it’s not broken 😄
@@andreaegliOpps sorry my bad
@@zafit02 hehe, no worries!
YES YES YES YES YES 🥰🥰🥰
Someone’s very excited 😆 thank you!!! 🤓
Hi Andrea , This code is not working for me , can you please guide, In comment share the detail, let me know how can i share the details of what i applied,
hey! Could be a number of things why it is not working for you. You can find the effect here, free to download ;) hope it helps
Hi Andrea! 👋
Does this effect only work for a flex -based layout?
Hey! It should work for any layout 😉
@@andreaegli Great! thanks for share it 😉
Need tutorial for cursor design change on different sections
Hey! here's one video on the channel that might help: czcams.com/video/DjP-yyB3gRw/video.html
Why is my elementor saying that custom css is a pro feature?
because it is a pro feature but you can add your custom css in the dashboard > appearance > customize > additional css
Very nice video ❤❤❤
Thank you ☺️
subscribed coz like you work keep it up
Thank you 😊
Thanks for the amazing video. Would be great if you could share with me a site where I can find those codes for more effects? Like codepen just for gsap animations
Hey David, thank you! I wish there was a site like that but to my knowledge, there isn't. I always go on codepen but unless you know how to code a bit, will be hard to implement. The GSAP community on the official website of GSAP has some great solutions too. I do a lot of 'leg' work to find them, test them and implement so that they work with elementor.
Hey this was great help. I was able to achieve in wordpress what people are doing on webflow with text split and uncovering each line character by character using a mask which is a bit darker then the text which makes it look like this. its the same effect but animation is different. if anyone wants to know let me know ill share its code.
Thank you! Yes, please I think everyone would be very grateful if you shared your solution ;)
@@andreaegli thank you for such good videos. your channel has helped me alot learn about gsap and wordpress.
so talking about the code i was able to make it work with the elementor heading title but was unable with elementor text editor. so i took the heading icon and wrote the text i wanted with a smaller text size so it seems like a paragraph. The class will be "split-lines" for the heading text.
You dont need any other html structure other then adding text into elementor heading text. The (.line and .line-mark) html structure have been made within javascript. so nothing else is needed. Just add the html icon and paste this code. you can play around with the css line-mask options for opacity and background color to match your websites background. (((((((YOU MIGHT WANT TO DELETE THE COMMENTS IN THE CODE I HAVE LEFT BEFORE RUNNING IT))))))))
.line {
position: relative;
}
.line-mask {
position: absolute;
top: 0;
right: 0;
background-color: #02061D;
opacity: 0.65;
height: 100%;
width: 100%;
z-index: 2;
}
(((((( OVERHERE I HAVE ADDED THE SPLIT-LINES CLASS WITH ELEMENTOR HEADING TITLE CLASS TO APPLY THE EFFECT ON IT)))))))))))))))))
document.addEventListener("DOMContentLoaded", function() {
let elementsToSplit = document.querySelectorAll(".split-lines .elementor-heading-title");
let instancesOfSplit = [];
// Split the text up
function runSplit() {
elementsToSplit.forEach((element, index) => { ((((((SPLITING TEXT HERE)))))))
instancesOfSplit[index] = new SplitType(element, {
types: "lines, words"
});
});
document.querySelectorAll(".line").forEach(line => {
line.insertAdjacentHTML('beforeend', ""); ((((((((LINE-MASK DIV MADE HERE))))))))
});
}
runSplit();
// Update on window resize
let windowWidth = window.innerWidth; (((((((TEXT RESIZE ON DIFFERENT SCREEN SIZE))))))
window.addEventListener("resize", function() {
if (windowWidth !== window.innerWidth) {
windowWidth = window.innerWidth;
elementsToSplit.forEach((element, index) => {
instancesOfSplit[index].revert();
});
runSplit();
createAnimation();
}
});
gsap.registerPlugin(ScrollTrigger);
function createAnimation() {
document.querySelectorAll(".line").forEach(line => { (((((ANIMATION OPTIONS HERE))))))
let tl = gsap.timeline({
scrollTrigger: {
trigger: line,
start: "top center",
end: "bottom center",
scrub: 1
}
});
tl.to(line.querySelector(".line-mask"), {
width: "0%",
duration: 1
});
});
}
createAnimation();
});
@@andreaegli For some reason my comment with the code isnt showing up anymore, it was posted im sure of that. any other way i can share the code ?
is it possible to use a class except elementor-heading-title
yes! like this: const textElements = gsap.utils.toArray('.title, h1'); .title - is the class you set and h1 must be the html tag for your heading. if you're using a p, set it to p in the code
@@andreaegli thanks will try this!
great content thanks for sharing!
Thanks for watching & thank you!
Hello Andrea, Excellent work thank you for sharing it. It works great on computer but it is not responsive on mobile phone (iphone). Any chance on helping me to fix that?
Why multiple headings are not working in same page? and how we can make that line by line, not all together from left to right?
Because this is the effect I went for. To achieve the effect you’re describing you would need to write different code
Thank you so much for all your videos, It works for me, but my site is RTL language, how to start this effect from right, I tried,,(to left) but didn't work, Thanks
Hi andrea i have a problem same Plz help us😭😭😭😭
Hello Andrea!
Comment about cursor video
I appreciate your excellent tutorials, as always. Please keep up the great work! I have a question: How can I add classes so that when I hover over a video, it displays "play," and when I hover over a contact element, it shows "let's talk"?
Thank you!
Does it works on text editor?
thank you for this great tutorial. I'm trying to use this script revealing a bodytext. Now everything gets revealed at once. I'm trying to reveal it word for word. Or by character. I know I need to change the javascript, but im not to familiar with it. Tried different things without result. Anybody here any suggestions?
Hey Andrea-thanks for the awesomeness!! I was looking for this for a long time....
Just a question: can we apply this effect from top to bottom? Like on a text with more rows...
Heeeyy!!! You are very welcome🤓 I think you could but I haven't tried that yet.
can i add this effect for text strokes?
Not sure what you mean, do you have an example?
I loved your video!! But, one question... How can I get access to your Notion codes library? Is it paid?
thank you so much! In the description of every video there's a link to a Notion file, which is free to access (for now::))).
@@andreaegli Thank youu!!
Great video andrea. Is it possible to add lenis smooth scroll with gsap in elementor
Thank you 😊 yup, I’m covering that briefly in this video FIXED SCROLL IMAGE GALLERY WITH GSAP & SMOOTH SCROLL (LENIS) - Elementor container edition
czcams.com/video/f-avuNMG5as/video.html
Thanks for another great video! :) How do we apply the effect only on H2 for example?
Hello Andrea, can we get this done by using elementor free version? I am not having pro version
If you make one word in one line of text in a different color, then this word does not work according to the script.What to do in this case?
The script needs to be adjusted accordingly
@@andreaegli Thanks for the answer! Can you please tell me what changes need to be made to the script?
Please 🙏🏻🙏🏻🙏🏻
Why dont you put JavaScript in the elementor custom code section?
If the code targets a specific element on a certain page, I prefer to have the code on that said page. I just find it easier to maintain, especially if you add a lot of code snippets to a website. Personal preference I guess...
Hi Andrea text, image reveal css animation on scroll work
nice, but wouldn't it look even better with some GSAP easing?
thanks! Sure😁
Can we use the same code for the old version of elementor ? I mean you explain it for flex container right .!!
Please let me know
Do you mean for sections? I guess, I’m not using the ‘old’ elementor anymore so I have not tested it on it but give it a try and see if it works
@@andreaegli ok will try
Your old studio looked great 😐
Hehe, it's the same studio, I just had to move my desk around😁
this is beautiful girl!
amazing
Thank you 🤓