HIGHLIGHT TEXT ON SCROLL WITH GSAP - Elementor Wordpress Tutorial Flex Container
ฝัง
- เผยแพร่เมื่อ 11 ก.ค. 2024
- Today we're working on building a highlighted text on scroll with GSAP and Elementor.
CODE: irradiated-watch-2d6.notion.s...
Timestamps:
00:00 Intro
00:34 Demo
12:37 Outro
Thank you for watching!
🟠 SUBSCRIBE TO THE NEWSLETTER:
newsletter.studioegli.com/
🟠 TRY ELEMENTOR
be.elementor.com/visit/?bta=2...
🟠 TRY HOSTINGER
hostinger.com?REFERRALCODE=1ANDREEA61
🟠 WORK WITH ME
www.studioegli.com/
🟠 YOU CAN FIND ME HERE TOO
TWITTER - @AndreeaEgli
LINKEDIN - / egliandrea
INSTAGRAM - / egliandrea.studios
🟠 FOR BUSINESS ENQUIRIES
contact@studioegli.com
Disclaimer - Some links in my videos' description box may be affiliate links, meaning I will make a commission on purchases you make through my link. This is at no extra cost to you to use my links/codes, it's just one more way to support me and my channel! :)
#elementortutorial #elementorpagebuilder #elementortipsandtricks
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? th-cam.com/video/xEkbMs6BR88/w-d-xo.html
I'm Brazilian, and your content is incredible. Thank you very much for sharing your knowledge with us 💙
You are amazing. I really love your tutorials. Thank you
Level 🔥
amazing
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😀
Well, this looks amazing! 🥰
🤓
very professional work
Meu deus que incrível! Obrigada pelo vídeo!!! 💖
You are very welcome, Amanda! ☺️
Thanks Andrea you are Amazing... This is exactly what i needed!!! thanks
You are very welcome 🤗
you're a life saver... thank you
Glad it helped & you're very welcome!😁
welcome back Andrea !
Thank you, Teo!
great content thanks for sharing!
Thanks for watching & thank you!
Superrrrrr! 😮👏 👏 👏 👍❤️🥰🥰
🤓
Maravilhoso, eu precisava muito disso!
So happy to hear that you like this ☺️
Amazing. I have been trying to do this but couldn’t. Thank you for the tutorial!
Thank you and you’re welcome ☺️
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.
awesome
Thank you !!
You're welcome!
Thank u so much🙏🌹
You’re welcome 😇
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!
Very nice video ❤❤❤
Thank you ☺️
subscribed coz like you work keep it up
Thank you 😊
Thanks for another great video! :) How do we apply the effect only on H2 for example?
Is it posssible to make the animation vertical? Would be great for longer headings
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 🙂
YES YES YES YES YES 🥰🥰🥰
Someone’s very excited 😆 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?
Does it works on text editor?
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
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.
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
Hello Andrea, can we get this done by using elementor free version? I am not having pro version
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?
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
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 🙃
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
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.
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
th-cam.com/video/f-avuNMG5as/w-d-xo.html
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!!
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 😉
Hi Andrea text, image reveal css animation on scroll work
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
can i add this effect for text strokes?
Not sure what you mean, do you have an example?
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!
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
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
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!
nice, but wouldn't it look even better with some GSAP easing?
thanks! Sure😁
Need tutorial for cursor design change on different sections
Hey! here's one video on the channel that might help: th-cam.com/video/DjP-yyB3gRw/w-d-xo.html
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...
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 🤓