HIGHLIGHT TEXT ON SCROLL WITH GSAP - Elementor Wordpress Tutorial Flex Container

[@andreaegli]

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!

[@teuccio73]

Can I suggest an idea for future tutorials? kzbin.info/www/bejne/rnbOk4Cpa6eFbpo

[@VikramSD-q2o]

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 🙂

[@isdsgn]

I'm Brazilian, and your content is incredible. Thank you very much for sharing your knowledge with us 💙

[@JayVisuallo-b5q]

you're a life saver... thank you

[@andreaegli]

Glad it helped & you're very welcome!😁

[@Aflorarte]

Andrea, I love all your videos, so much!!! Unfortunatelly I couldn´t make it with this one. I have tried twice but I couldn´t make it work. Mine is actually NOT WORKING ;) I even tried inserting the class to the headings even when it seemed redundant. But that did not solve the problem. Could you perhaps indicate any possibe reason for this failure. I have Elementor Pro. My best appreciation for your work!

[@ricardovaldivia9828]

I´m in love with this chanel. Thank you so much Andrea for your content, is the best of the best.

[@andreaegli]

Wow, thank you so much, Ricardo and you are very welcome😀

[@JohnXionidis]

Well, this looks amazing! 🥰

[@andreaegli]

🤓

[@anthonynguyen3519]

Amazing. I have been trying to do this but couldn’t. Thank you for the tutorial!

[@andreaegli]

Thank you and you’re welcome ☺️

[@kingmam5613]

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.

[@MIMMarketing]

You are amazing. I really love your tutorials. Thank you

[@shazam23]

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!

[@andreaegli]

Can be done but you need to write different code. I might do that at some point

[@Wasil.developer]

very professional work

[@brandedright]

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 ~

[@andreaegli]

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

[@ShirBenovich]

Thanks! Question: if I want the effect to start from the right (for RTL languages), what should I change?

[@ThomasTilahunp]

always you are hero b/c always you are my solution🎉❤❤❤❤❤❤❤

[@MichaelHansen1]

Great video! Curious, what adjustments can be made to add the scrolling effect to the individual words instead of the paragraph 🤔

[@andreaegli]

Thank you 😊 a complete different code. It’s in my list to do 😉

[@MichaelHansen1]

@@andreaegli Notifications on! ;)

[@MichaelHansen1]

@@andreaegli Website where an example can be found, I tried mimicking the CSS, unsuccessful 🙃

[@teuccio73]

welcome back Andrea !

[@andreaegli]

Thank you, Teo!

[@zafit02]

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

[@andreaegli]

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

[@zafit02]

@@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

[@andreaegli]

@@zafit02 you said fix the code that’s why I said it’s not broken 😄

[@zafit02]

@@andreaegliOpps sorry my bad

[@andreaegli]

@@zafit02 hehe, no worries!

[@atulkadyan1303]

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

[@gaonadesigner]

I loved your video!! But, one question... How can I get access to your Notion codes library? Is it paid?

[@andreaegli]

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::))).

[@gaonadesigner]

@@andreaegli Thank youu!!

[@mybrandzin]

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!

[@amandakristhina4692]

Meu deus que incrível! Obrigada pelo vídeo!!! 💖

[@andreaegli]

You are very welcome, Amanda! ☺️

[@sebdemb]

Is it posssible to make the animation vertical? Would be great for longer headings

[@LeoMonsalve]

Hi Andrea! 👋 Does this effect only work for a flex -based layout?

[@andreaegli]

Hey! It should work for any layout 😉

[@LeoMonsalve]

@@andreaegli Great! thanks for share it 😉

[@yvescrystal2279]

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?

[@sabhifacts2028]

Does it works on text editor?

[@Luzenify]

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...

[@andreaegli]

Heeeyy!!! You are very welcome🤓 I think you could but I haven't tried that yet.

[@davidmuller3768]

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

[@andreaegli]

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.

[@moog6513]

Thank you !!

[@andreaegli]

You're welcome!

[@Graphix007]

Thank you very much how can I do this effect on multiple sections?

[@varshigamer-uk8ln]

Hello Andrea, can we get this done by using elementor free version? I am not having pro version

[@AIprodmagnet]

amazing

[@MarloweRamirez-e3q]

im collecting some of your vids so that I can use them :)

[@andreaegli]

Ok, use them for what?

[@AuswideServices-c1g]

Hi, the effect does not work on the other section. Can you please let us know the reason?

[@andreaegli]

Hey! What other section? Explain exactly how you implemented it because it makes a big difference 😉

[@ot8508]

Why is my elementor saying that custom css is a pro feature?

[@andreaegli]

because it is a pro feature but you can add your custom css in the dashboard > appearance > customize > additional css

[@Art-01]

Thank u so much🙏🌹

[@andreaegli]

You’re welcome 😇

[@Webrisernl]

great content thanks for sharing!

[@andreaegli]

Thanks for watching & thank you!

[@SultanaRazia-jx8mk]

Very nice video ❤❤❤

[@andreaegli]

Thank you ☺️

[@rtydesign]

Thanks for another great video! :) How do we apply the effect only on H2 for example?

[@launchwithabhi]

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?

[@andreaegli]

Because this is the effect I went for. To achieve the effect you’re describing you would need to write different code

[@nidarahman2305]

awesome

[@izhaarmianbscs-1402]

Level 🔥

[@wasavikashozal9735]

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,

[@andreaegli]

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

[@muktadirrudro7552]

Great video andrea. Is it possible to add lenis smooth scroll with gsap in elementor

[@andreaegli]

Thank you 😊 yup, I’m covering that briefly in this video FIXED SCROLL IMAGE GALLERY WITH GSAP & SMOOTH SCROLL (LENIS) - Elementor container edition kzbin.info/www/bejne/nF7Ep6iEgqxol9U

[@kamessytta]

Superrrrrr! 😮👏 👏 👏 👍❤️🥰🥰

[@andreaegli]

🤓

[@saulmelo9517]

Maravilhoso, eu precisava muito disso!

[@andreaegli]

So happy to hear that you like this ☺️

[@atulkadyan1303]

subscribed coz like you work keep it up

[@andreaegli]

Thank you 😊

[@uixmax]

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?

[@andreaegli]

The script needs to be adjusted accordingly

[@uixmax]

@@andreaegli Thanks for the answer! Can you please tell me what changes need to be made to the script?

[@uixmax]

Please 🙏🏻🙏🏻🙏🏻

[@hossamhoo6552]

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

[@arsalanhosseinifar]

Hi andrea i have a problem same Plz help us😭😭😭😭

[@jubin9730]

is it possible to use a class except elementor-heading-title

[@andreaegli]

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

[@jubin9730]

@@andreaegli thanks will try this!

[@lehlohonolomokoena2204]

YES YES YES YES YES 🥰🥰🥰

[@andreaegli]

Someone’s very excited 😆 thank you!!! 🤓

[@hannekeverhoeven9171]

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?

[@daanvanmiddendorp122]

Why dont you put JavaScript in the elementor custom code section?

[@andreaegli]

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...

[@tynegeemajor]

can i add this effect for text strokes?

[@andreaegli]

Not sure what you mean, do you have an example?

[@MDOBAIDULHAQUE-y8j]

LOVE YOU 🥰MaM

[@franktielemans6624]

nice, but wouldn't it look even better with some GSAP easing?

[@andreaegli]

thanks! Sure😁

[@mohamedrazin9900]

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

[@andreaegli]

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

[@mohamedrazin9900]

@@andreaegli ok will try

[@bmax1685]

Hi Andrea text, image reveal css animation on scroll work

[@VinayJain-k5s]

Need tutorial for cursor design change on different sections

[@andreaegli]

Hey! here's one video on the channel that might help: kzbin.info/www/bejne/epuzXqyvd5iaiNk

[@sarim88]

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! Yes, please I think everyone would be very grateful if you shared your solution ;)

[@sarim88]

@@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(); });

[@sarim88]

@@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 ?

[@iamalifawad]

Your old studio looked great 😐

[@andreaegli]

Hehe, it's the same studio, I just had to move my desk around😁

[@kayquebritoo]

this is beautiful girl!

[@PaulDewseth]

amazing

[@andreaegli]

Thank you 🤓