TEXT REVEAL ANIMATION WITH GSAP - Elementor Wordpress Tutorial Flex Container
HTML-код
- Опубликовано: 7 авг 2024
- What do you think about these text GSAP animations?
CODE: irradiated-watch-2d6.notion.s...
GSAP Docs: greensock.com/docs/v2/Easing
Split-type JS library: www.npmjs.com/package/split-type
Timestamps:
00:00 Intro
00:30 Text reveal animation for on-page load
08:40 Text reveal animation for on-scroll load
15:58 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
It's here!!!! Let me know if you found this useful
Can you do a tutorial on how to change images on scroll, the images should be in a fixed (sticky) position, but change when new sections come.....
@@graphicdestination968 Yeah, do you have an example? I think I have smth similar on the channel but needs a bit of modification...
Genius! loved it, applied it, thank you so much! loving your gsap tutorials!
such a nice vibe for the video, loved your friendly attitude and the lighting
Thank you so much ☺️
Wow! Very helpful video!❤
I'm very happy to hear that!!!🤩
Luv these styles! 🎉
Me too! I was so obsessed when I saw them for the first time on webflow websites that I HAD to find a way to implement them on elementor 😃
thanks a lot for this kind of video ! gsap tutorials are the bests !
You’re very welcome, Baptiste! I know, right? 😀 I’ll be making more in the future 👏
@@andreaegli Nice sounds ! Very excited to see it !
Very nice and very useful. ❤
Hi, great video!
One suggestion: If someone is experiencing errors where the text flickers before the animation starts, here is an improved version of the code:
window.onload = function () {
const myText = new SplitType('h1');
gsap.from('.char', {
y: 175,
stagger: 0.02,
delay: 0.2,
duration: 0.8, // Adjusted duration for a smoother transition
});
gsap.to('.text', {
opacity: 1,
duration: 0.8, // Adjusted duration for a smoother transition
});
};
.char {
transform: translateY(175px);
transition: transform 0.8s;
}
.text {
overflow: hidden;
opacity: 0;
transition: opacity 0.8s;
}
I think it will be a great tutorial as always
Hope so!🤓
Super useful content like always 🙌
Thank you 😊
We need more content
you are the best thnx , i follow you from algeria
Thank you very much Andrea, I'm loving the videos and your laid-back personality, I have used many of your other videos which I followed perfectly and everything worked perfectly, this one however seems confusing to me, I can't figure out what goes where at all...maybe it's my mind or perhaps the video edit...probably my mind....:-))
Thank you so much for your kind words! Hehe, could be my edit tho :)) I will have this effect added to ohwow.club/template/ check back in a few days & you can download it
@@andreaegli Thank you, I'm getting there, I want it to activate the animation only when in the viewport, like halfway down the page, currently me Gemini and chat GPT can't find a solution...:-)) I think I might try it on a separate page there is obviously a conflict somewhere on my test page with regards to the scroll trigger...I'll get there....eventually 🙂
Very useful☺️👍👌👏❤
yay!
Awesome video thank you.
How do you make it so the text appears just above the line, rather than setting the translateY to 175px.
The issue I'm getting is for headings that take up 3 lines start from really low down before the begin the animation rather than starting from one line down. I hope that makes sense.
Great video! I was wondering why my typeface kerns different with this effects though?
You are brilliant, you remind me of this other girl who teaches Elementor in Portuguese.
Thank you, Greg! Ohhh, she’s sounds interesting, what’s her RUclips handle? 🤓
Will you update in next video, about that text reveal will work not only on page load but when you scroll to that text then animation starts? love your videos
Hey Allen! Actually the code in this video works for both on page load and scroll. have you tried it? Thank you😉
Аndrea, when i use IMAGE REVEAL ANIMATION WITH GSAP your other video in the same project to animate elements then the other is not working, what could be the issue?
Hello Andrea! Great work as always! What I can do so I can have a different stager for mobile and pc? Now it's the same for the two of them but I want to have a different one.
Hey Axel! Thank you 😊 you would need to add media queries but why do you want to have different stagger for mobile and pc?
@@andreaegli On pc it's loading at the right time and if I go to mobile it's loading too slowly. If change the mobile stager after on pc it's loading too fast.
@@Axel1665 ah ok, i get what you meant now. It would be too much to explain here but maybe this video could help. I will do a quick video next week explaining this in case you can't make it work in the meantime.
@@Axel1665 ok, i get it now. I will film a short video next week on this but until then maybe this can help ruclips.net/video/9gipsKpWozE/видео.html
@@andreaegli First of all thank you for your help! I saw the video but I'm not a developer so is Chinese for me :P
Hi, Thanks so much Andrea for this amazing tutorial , Just one query if i want the text to be faded in along with the animation you had, how to acheive that? any suggestions?
hmm, not sure I understand what you mean, like a fade-in animation?
@@andreaegli Thanks for the revert, yes i wanted to understand how to give a fade in animations along with the word animation which you have shared above, as is we can make smooth fade also a part of it ,i think it will look more better
Can I apply this to a column or section? thank youu💗
I don’t see why not 😉
i tried it, but didn't worked in my custom website.. 😢
Hi thanks for doing this, but im trying to get it to work and it doesn't work? Where do I insert the code? I added the HTML widget under my container.
hey Glen! You are welcome. Have you added the css as well? Which of the codes are you using, on page load or page scroll? Also, generally, make sure that your html widget is at the bottom of the page to help reduce the page loading time
@@andreaegli I added the css to the header widget and it worked. Thanks for the awesome tutorial 🥰
@@glencoe1266 whoop! whoop! Awesome & you're welcome!
@@glencoe1266 just a little note, you might have to adjust the line-height of the text depending on it's size. I forgot to mention that in the video.
Is there any video in your channel about installing GSAP properly in Elementor?
The way GSAP is used is through the CDN script tag, that's the whole 'installation'. If you want to add it to the whole website, just paste the script tag in the custom code of elementor and change the location to body-end. That's it!
@@andreaegli Thanks andrea, I believe your channel will reach the top someday, as you are one of the most underrated creators. Keep making these amazing videos.
Your Tuts are amazing... but in this case I'm not able to make it working... I don't know how to set the css classes in the various element. (who have 'char' and who have 'text'?)! Thanks
You didn't answer me! LOL😂 which class I have to set for the "heading widget"? And what class I have to set for the container in which is contained the text?
Thank you so much, Gaetano! Ok, I can see why it would be confusing...so, give the class of text (or whatever name you want your class to be) to your heading and add the css code: text { overflow: hidden} in the Custom CSS box of the container in which the heading is in.
Then, in your HTML widget where you have your GSAP code, go to Advanced > Custom CSS and add the .char {
transform: translateY(175px);
transition: transform .5s;
}
Do not change the class name .char. Leave it as is, as this is part of the SplitType library. If you look at the GSAP code, line 12, you will see the class .char in there. No need to add it anywhere else.
Let me know if you need more help.
I found the mistake... It doesn't work on a Popup!!!!
@@gaetanosorangelo4550 ok, I haven't tested this on a popup but try increasing the delay from delay: 0.2 to delay: 0.9 for example
@@andreaegli Hi Andrea, did you ever tried to replicate this kind of text reveal? ruclips.net/video/yvqSioowCRc/видео.html I tried by mayself but there's no way to exit LOL!
This is a very cool effect in "Apple style"... but I don't know where I can start in Elementor! You're great!!!
Madam it is not working on page load, where I have to put the script?
Hey Varshi! Which snippet are you using and where have you placed it in Elementor?
@@andreaegli Hi, I had done small mistake. Now it working. Great tutorial. Thanks for your reply and informative video.
@@andreaegli Could you please do a video if possible on hover expand the column by pushing the side columns in a row. Or please give any link if you have. Thanks in advance
Hi Madam, on page scroll the split character effect is not working
Hey! The code is not customised to split type on scroll.
@@andreaegli Madam could you please provide that code. It will be very helpful
Is this also work on mobile devices??
yup!
Thanks 😊
marry me !! : ) very helpful !!
🤣 no but thank you
@@andreaegli Why not? 😍...............................................................................................................................................im joking!
@@teuccio73 because that would be bigami
Are you the sister of the guy who runs the YT channel called living with pixels? 😂 looks similarly
😂 I get this question often but no, I'm not. I get the resemblance though!!!
@@andreaegli Hahaha. I just saw another comment with the same question as mine. 😁😁
Are you RINO THE TESTER'S sister......you speak n look lot like him🤔❤️🥰
hahah, i have no idea who that is...who is he?
Nine months later for me it doesn't work even tho i did everything you said :)
What did you use in the variable, elementor class or html tag h1? Mine work just fine, I used h1.
@@andreaegli After a lot of trial and error i found that if you put the first code inside elementor custom code and the second code in apperance - customize - custom code and insert .reveal-text (Not .text) to overflow hidden then it works.
it does not work anymore
Have you tried this code before and it worked and now it doesn’t? It works fine on my side.
@@andreaegli no, its jut not working on my site at all. Is there a specific place where I should put on html with this script maybe? because I copy everything you did, and it jus not working
hi andreia, your videos are wonderful. In view of this video, is it possible to create this text effect (link below) in Elementor?
ruclips.net/video/yvqSioowCRc/видео.html
Thank you, Thiago ☺️ it should be possible, I will trial it and make a future video
@@andreaegli thanks andrea! :D
In your code const myText = new SplitType('.elementor-heading-title')
gsap.to('.char', {
y: 0,
stagger: 0.02,
delay: 0.2,
duration: .1,
})
I want this beautiful split character effect for all my headings on scroll. It is working only for banner heading only. Please advise me, may be i had done some mistake.
Madam please give reply
As I said in the video, the split type is set to work only on page load. For it to work on all your headings, the code needs to be adjusted accordingly.
@@andreaegli ok madam