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

Подписаться 12 тыс.

Просмотров 14 тыс.

50% 1

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

Опубликовано:

30 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 104

@andreaegli 9 месяцев назад

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 9 месяцев назад

Can I suggest an idea for future tutorials? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xEkbMs6BR88.html

@isdsgn Месяц назад

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

@MIMMarketing 5 месяцев назад

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

@ricardovaldivia9828 8 месяцев назад

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

@andreaegli 8 месяцев назад

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

@Wasil.developer 25 дней назад

very professional work

@izhaarmianbscs-1402 8 дней назад

Level 🔥

@JohnXionidis 9 месяцев назад

Well, this looks amazing! 🥰

@andreaegli 9 месяцев назад

🤓

@BalzacTorino 9 месяцев назад

Thanks Andrea you are Amazing... This is exactly what i needed!!! thanks

@andreaegli 9 месяцев назад

You are very welcome 🤗

@amandakristhina4692 9 месяцев назад

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

@andreaegli 9 месяцев назад

You are very welcome, Amanda! ☺️

@user-pl4tg2nt1j 9 месяцев назад

you're a life saver... thank you

@andreaegli 9 месяцев назад

Glad it helped & you're very welcome!😁

@anthonynguyen3519 9 месяцев назад

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

@andreaegli 9 месяцев назад

Thank you and you’re welcome ☺️

@teuccio73 9 месяцев назад

welcome back Andrea !

@andreaegli 9 месяцев назад

Thank you, Teo!

@saulmelo9517 9 месяцев назад

Maravilhoso, eu precisava muito disso!

@andreaegli 9 месяцев назад

So happy to hear that you like this ☺️

@user-ny5of6om3v 8 месяцев назад

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 🙂

@kamessytta 9 месяцев назад

Superrrrrr! 😮👏 👏 👏 👍❤️🥰🥰

@andreaegli 9 месяцев назад

🤓

@brandsin6371 9 месяцев назад

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!

@moog6513 8 месяцев назад

Thank you !!

@andreaegli 8 месяцев назад

You're welcome!

@nidarahman2305 9 месяцев назад

awesome

@Webrisernl 7 месяцев назад

great content thanks for sharing!

@andreaegli 7 месяцев назад

Thanks for watching & thank you!

@rtydesign 8 месяцев назад

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

@Art-01 9 месяцев назад

Thank u so much🙏🌹

@andreaegli 9 месяцев назад

You’re welcome 😇

@PaulDewseth 9 месяцев назад

amazing

@andreaegli 9 месяцев назад

Thank you 🤓

@SultanaRazia-jx8mk 9 месяцев назад

Very nice video ❤❤❤

@andreaegli 9 месяцев назад

Thank you ☺️

@atulkadyan1303 9 месяцев назад

subscribed coz like you work keep it up

@andreaegli 9 месяцев назад

Thank you 😊

@shazam23 2 месяца назад

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 2 месяца назад

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

@lehlohonolomokoena2204 9 месяцев назад

YES YES YES YES YES 🥰🥰🥰

@andreaegli 9 месяцев назад

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

@atulkadyan1303 9 месяцев назад

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

@sebdemb 9 месяцев назад

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

@Luzenify 8 месяцев назад

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 8 месяцев назад

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

@yvescrystal2279 3 месяца назад

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?

@hossamhoo6552 9 месяцев назад

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

@MichaelHansen1 3 месяца назад

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

@andreaegli 3 месяца назад

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

@MichaelHansen1 3 месяца назад

@@andreaegli Notifications on! ;)

@MichaelHansen1 3 месяца назад

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

@brandedright 2 месяца назад

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 2 месяца назад

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

@davidmuller3768 9 месяцев назад

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 9 месяцев назад

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.

@muktadirrudro7552 9 месяцев назад

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

@andreaegli 9 месяцев назад

Thank you 😊 yup, I’m covering that briefly in this video FIXED SCROLL IMAGE GALLERY WITH GSAP & SMOOTH SCROLL (LENIS) - Elementor container edition ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-f-avuNMG5as.html

@sabhifacts2028 3 месяца назад

Does it works on text editor?

@wasavikashozal9735 27 дней назад

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 26 дней назад

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

@gaonadesigner 6 месяцев назад

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

@andreaegli 6 месяцев назад

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 6 месяцев назад

@@andreaegli Thank youu!!

@varshigamer-uk8ln 6 месяцев назад

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

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

@hannekeverhoeven9171 5 месяцев назад

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?

@zafit02 3 месяца назад

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 3 месяца назад

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 3 месяца назад

@@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 3 месяца назад

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

@zafit02 3 месяца назад

@@andreaegliOpps sorry my bad

@andreaegli 3 месяца назад

@@zafit02 hehe, no worries!

@ot8508 6 месяцев назад

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

@andreaegli 6 месяцев назад

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

@launchwithabhi 4 месяца назад

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 4 месяца назад

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

@user-em7nc5eo9z 5 месяцев назад

Need tutorial for cursor design change on different sections

@andreaegli 5 месяцев назад

Hey! here's one video on the channel that might help: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-DjP-yyB3gRw.html

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

@tynegeemajor Месяц назад

can i add this effect for text strokes?

@andreaegli Месяц назад

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

@franktielemans6624 9 месяцев назад

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

@andreaegli 9 месяцев назад

thanks! Sure😁

@uixmax 9 месяцев назад

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 9 месяцев назад

The script needs to be adjusted accordingly

@uixmax 9 месяцев назад

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

@uixmax 9 месяцев назад

Please 🙏🏻🙏🏻🙏🏻

@bmax1685 9 месяцев назад

Hi Andrea text, image reveal css animation on scroll work

@iamalifawad 9 месяцев назад

Your old studio looked great 😐

@andreaegli 9 месяцев назад

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

@daanvanmiddendorp122 9 месяцев назад

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

@andreaegli 9 месяцев назад

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