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; }
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 🙂
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
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.
А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?
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
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?
@@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
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.
@@andreaegli Hi Andrea, did you ever tried to replicate this kind of text reveal? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-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!!!
@@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.
Hi!, happend to me that i cant animate text (split type) in lines, in elementor. Works only in pure code, not in WP, know something about that?, thanks!
hi andreia, your videos are wonderful. In view of this video, is it possible to create this text effect (link below) in Elementor? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-yvqSioowCRc.html
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.
@@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
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.
@@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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9gipsKpWozE.html
@@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
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.
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.
