GSAP HIGHLIGHT TEXT ON SCROLL - Elementor Wordpress Tutorial Flex Container

[@zafit02]

I WANTED THIS FOR SOOOOOOOOOO LONG THANK YOU.

[@andreaegli]

hahaha, me too!!! you are very welcome!!!

[@Mr-xo3id]

Its a great effect... I prefer the effect end till the text reach the mid of the screen... Thank you Teacher

[@andreaegli]

It is indeed! Hey, we can choose between the two depending on your use case 😉

[@anthonyjibueze3783]

Worked Perfectly, You've made the Wordpress vs Webflow brag closer.

[@prokassim]

Amazing, i have always liked and wondered how to get this effect, thank you very much for awesome tutorials, and looking forwards to the next one !

[@andreaegli]

Thank you! Yes, I’ve also always loved this effect but was a bit difficult to figure out how to make it work in elementor 😁

[@prokassim]

@@andreaegli I have also checked your website , and i think it's really good idea to have all these effects as templates, i intend to buy some of them soon, and they are affordable too, thanks again.

[@chadgoetz]

Hey Andrea, love your videos! Have you ever thought about making a video about your web design journey? (how you got your first few clients, etc) Would love to hear your story.

[@harryking5533]

This is great! Worked like a charm 🌟

[@YangMiyt]

Thank you so much, Mam! This is exactly what I'm looking for

[@eliaswetscher4203]

Wow! A very cool thing! Thank you for tutorial!

[@andreaegli]

Thank you 😊 you are very welcome!

[@mdasadolislam8386]

Thank you very much for this kind of video. Take love From Bangladesh ❤

[@tys0n822]

Yes this is what I was looking for thank you Miss for this vid

[@sameerpatelxyz]

awesome! 🤩🤩 this add luxury effect in site, amazing thank you.

[@andreaegli]

You're welcome 😊 i know, right?

[@shazam23]

Amazing stuff! I've been trying to get this working on my own by modifying the previous video where the effect was applied line by line instead of word by word in a paragraph, but thanks to you, you made it work! Any reason why there seems to be a right padding applied though?

[@Gokuzarif]

i dont know if i missed something but is there a way to hide or remove scroller-start / scroller-end text on the right. Love your videos.

[@andreaegli]

I always forget to mention this, remove the marker: true completely or set it to false ;)

[@Gokuzarif]

@@andreaegli thank you so much

[@eyon-d6b]

Thank you 😍

[@mukulgoingdark]

The effects works perfectly but is there a way to hide the scroll start and end text that gets shown at the edges of the screen?

[@andreaegli]

Thanks 😊 remove the property markers:true or set it to false

[@muchasvoces]

Thanks Andrea!

[@miguelrf7949]

I LOVE YOU!

[@AtapuercasMan]

Hello Andrea, I'm Alfonso. Is it possible to use both the new and old versions of GSAP Highlight Text on Scroll on the same page in different containers? I love your videos because I'm learning a lot since I'm teaching myself how to program. Thank you

[@andreaegli]

Hey Alfonso!!! not sure, I haven't tried it together tbh. thank you so much!

[@raeesahmadkhan6862]

Same thing I figured out around in Jan- Feb for a website, with the sticky container.

[@BriannaPetz]

This is a super cool effect. How do we add this to mobile? You mention adding the media queries, but I'm not sure how to set this up with code. Also, it works great on Chrome, but not on Safari nor Firefox. Any suggestions?

[@gladiadoraxe3795]

@andreaegli can you give us some pointers how to get it to work in mobile version?

[@davidetamiazzo7134]

I managed, like a fool I hadn't seen the split variable and hadn't renamed it to the new class I had created

[@andreaegli]

hahahah, we're all fools here no worries :))) happy that it's working ;)

[@chmon666]

Great tutorial! thanks. But is there any way to smooth the revealing animation? please let me know. Thanks in advance :D

[@andreaegli]

Yes, add scrubbing to it….take the code into ChatGPT and ask it to add scrubbing to it, I haven’t tried it but it should work😉 hope it helps

[@ManipurJobNewsin]

Can you please make a video for the mobile version also... Btw thank you for the video It helps me a lot...

[@gopoo]

Hey Andrea! Thank you for this tutorial. However, it seems not working on mobile devices (for me).

[@andreaegli]

hey! You need to adjust the effect for mobile devices with media queries

[@davidetamiazzo7134]

Hi I saw the video and tried to reply. I followed everything and it works, so I said why not replicate it in another section of my site? Well, from here I had the problems, because I see that the javascript creates the new "word and chars" divs of my new text, but when scrolling the color is not changed... I can't understand why. could you help me please

[@teuccio73]

Nice work as usual! I tried to copy the text into another container always in the about section but it doesn't work... what am I doing wrong. Thank you!

[@andreaegli]

Thanks! hmm, what do you mean? the class *about that triggers the effect needs to always be set one container before the heading...i can send you the JSON file if it still doesn't work ;)

[@teuccio73]

@@andreaegli If I apply the tutorial to a single container and a single text it works... but if I create multiple containers with other texts only the first one works

[@AbuAhsanArif]

@@andreaegli Facing the same issue!

[@juandylan4052]

@andreaegli Yes, I have the effect on one container and it works, but if I want to use the same effect on another container down bellow, (to keep everything cohesive), doesn't work. It only works on the first container, maybe that is the problem that we are experiencing? By the way, great video as always!

[@irinakazakova671]

@@andreaegli I just did same - apply effect for two containers (second container is after two containers) and only one is working - first container. And - I love your videos. Thank you a lot!

[@ouwehandjonathan]

Great video, thank you! But in my live version, I still see the start and end markers. How do I remove them?

[@kelvinjr4854]

You remove them in the script code or set it to false.

[@andreaegli]

Thanks! I always forget to mention this, set the markers in the GSAP code to false or simply remove the property ‘markers’

[@ouwehandjonathan]

@@kelvinjr4854 Oh, I could have figured that out myself, apologies. Thanks anyway!

[@kelvinjr4854]

@@ouwehandjonathan welcome

[@kelvinjr4854]

@@andreaegli welcome

[@jeeiee_com]

thank you

[@anu.elsewhere]

what about mobile optimization???

[@brianossowski4609]

nice

[@andreaegli]

Thanks 😊

[@guillaumehaas1496]

Hey Andrea cool stuff ! I hope u can help me, i created a carousel with clients logos (using one of your video :p), and then i added a white degraded pic on left and right in a new section, and then I used the margins to put it on the carousel. Finaly, I used z-index to put the pics section on the carousel. It works perfectly in the elementor editor but it doesn't work on the website... I tried all the solutions mentionned on the elementor support but it still not working... I hope u can save me on this !! ??

[@andreaegli]

Thank you 😊 can you send me the json file so I can see what you mean exactly?

[@Graphicayya]

Hey andrea cool video, i did it, but how can i remove start and end green and red text right side of my screen. I read that one comment and found this "Thanks remove the property markers:true or set it to false" - adrea egli

[@andreaegli]

yes, do what I said in the comment, you will find that property in the gsap code

[@ashman123456789]

When i set that to false the whole thing breaks

[@andreaegli]

@@ashman123456789 did you remove the coma at the end? this should not impact the code at all..you probably deleted something else in the process...I've removed it from the code on the website, copy&paste it again, it works ;)

[@Graphix007]

Do I need multiple HTML and different class names to do this effect of multiple sections?

[@Graphix007]

I was able to figure it out on my own thank you

[@skkk-c3u]

@@Graphix007 hye can you share how you do it? because i tried copying the code to another container changed the css class of the new text to a different one, used a different trigger container ('about') to a different trigger, but only the first one works. so how did you do it?

[@muhammadadeel4940]

It did not work on my website, i do not know why? can you help me?

[@andreaegli]

Have you followed the video all the way or skipped parts of it?

[@muhammadadeel4940]

@@andreaegli I followed and even opened your website and copy the code but not working

[@YangMiyt]

I think there have something wrong on the code with viewport settion. It's working fine with short height page but not working on any long page

[@spike_kulu]

Hi, I have a problem. It's great when you have only this script on a page. But When I have a second script GSAP "animated text on load", the text with highlight on scroll translate down ? I tried to combine the script, but without succeed, it's out my compétence.

[@dilanestyvetchinda]

Hi, thanks for this amazing content. On my side it isn't working on mobile and tablet

[@jazibgillani784]

What is this software for design?

[@daedaluxe]

GSAP LADY

[@andreaegli]

:))))

[@daedaluxe]

@@andreaegli xD

[@framer-web-love]

Hello My Deaf You Love 🫶❤ Like your teacher I am learning 🫶

[@Uabramoon75]

What the hell is all that ? I was looking for a tutorial to do this with JavaScript, html and css , and I ran into this video that doesn't explain anything

[@andreaegli]

Well, this is not it then 😉 look further for what you need

[@Uabramoon75]

@@andreaegli you're so nice 👍