@@ACEARYAN i'm not talking about that, I'm refering to the fact that the line-height and font size need to be adjusted together in order for this to work...this is smth that is specific to your use case i.e font used, size etc...you just need to play around with those properties and make the adjustments
You have a beautiful personality, Andrea. It compliments the great content you put out for us. Thank you for you dedication and hard work. It is appreciated.
I think you can do this with only CSS when you put each letter in a span element. For the staggering effect you could add an data-attribute to each span and use a CSS calc formula to generate the staggering animation. That way you don't have to target each letter via an nth-child selector and transition-delay value. You only need a interval value.
For sure, would love to see how you implement this, make a video on it? It would be nice to have a second option. Also, I find it difficult to implement on buttons, still working on it but not there yet. Maybe your solution would help…
@@andreaegli I created all kind of buttons long time ago and a staggeringing letter animation is one of them. But I can't show you the demopage bacause when I paste an external URL, my comment will be removed by youtube.. Also for the effect you have to clone the button text.. You can do this via a data-atribute in the link of the button. Each button widget has the option to add a custom attribute via the link options (the cog icon) Imagine you have a button with text "show more" If you want to clone that button text, you can go to link options of the button and create a custom attribute like this data-text | show more in CSS styles you create a psuedo element where you use the custom attribute as content, content: attr(data-text); The content of the psuedo will be text of your button. One of my buttons has these styles: selector { overflow: hidden; } selector .elementor-button-link::before { content: attr(data-text); position: absolute; left: 0; right: 0; margin: 0 auto; bottom: -100%; color: aqua; padding: inherit; transition: 0.5s cubic-bezier(0.76, 0, 0.24, 1); z-index: 2; transform: rotate(-5deg) } selector:hover .elementor-button-link::before { bottom: 1%; transform: rotate(0deg) } selector:hover .elementor-button-text { transform: translateY(-200%) rotate(-5deg) !important; opacity: 0 } selector .elementor-button-text { transform: translateY(0%) rotate(0deg)!important; transition: 0.5s cubic-bezier(0.76, 0, 0.24, 1) ; opacity: 1 } Here are a few axemples franktielemansbe/blog/doubling-text-via-data-attribute Dot was removed between franktielemans and be. (otherwise CZcams will remove my comment)
Hii andrea, Great tutorial but i am having some issue implementing it when i hover on the heading it works but hover is effect is not working the text is going up but its not showing the hover color
Hi Andrea! I would like to know how you use Elementor and Framer. Do you think one will replace the other? Are you migrating to Framer like many designers? I would like to know your opinion since I feel that Elementor is also part of no-code.
At this point Framer is a little baby compared to Elementor, comparing the two is a bit futile BUT I prefer to stick with WP and whatever page builder like Elementor or bricks or smth else rather than get stuck into an ecosystem where you have to pay an arm and a leg to build complex websites. For example, I know someone who uses Webflow and was charged 20k (yes, no joke) for hosting because he has over 250k page views per month! He's website is a one pager...look up designjoy on Twitter, his name is Brett. So, don't chase shinny things....
I've seen your comment on another video and it seems to me that you are actually not trying very hard to fix your issues. If you just say that something doesn't work without explaining what you did step by step and what happened when it didn't work, nobody can help you. Please try explaining so I or someone in the community can help you. We are all here to help one another. I like to see people trying hard to find solutions to their errors. This is the only way you will learn anything. Don't just copy-paste. Now, explain to us, what is the issue?
@@andreaegli Hey, Thanks for your reply I really appreciate it. I have follow each and every step in this video but it seem that the txt is just not showing the hover animation I don't know the reason that why I reply. I am not being rude to you almost I have seen all your video I really love how easy you make uploading cool animation to your website. I have seen almost all your video and try to apply that in my website but I don't know that this hover effect and in that other gsap text revel video it doesn't work on my website. Anyways, I really appreciate your content keep uploading new and cool videos. ❤️😊🤗
you need to adjust the line-hight but keep in mind the size of your font. It's a matter of adjusting both in order for it to work accordingly. As you can see in the video, I already explain that..
This animation is specific for links (not buttons- doesn't work that well, at least not yet so I have not shown how to implement it in this video)
Its a link only i am not using buttons
@@ACEARYAN i'm not talking about that, I'm refering to the fact that the line-height and font size need to be adjusted together in order for this to work...this is smth that is specific to your use case i.e font used, size etc...you just need to play around with those properties and make the adjustments
You have a beautiful personality, Andrea. It compliments the great content you put out for us. Thank you for you dedication and hard work. It is appreciated.
This is fairly easy to do with GSAP using the Stagger property.
some HTML:
Hover me
Some CSS
.text-block {
overflow: hidden;
position: relative;
cursor: grab;
}
.text {
position: absolute;
display: inline-flex;
}
Some JavaScript
let textBlock = document.querySelector(".text-block"),
one = document.createElement("div"),
two = document.createElement("div");
let splitText = (element) => {
let chars = element.innerText.trim().split("");
element.setHTML("");
chars.forEach((char) => {
element.innerHTML += `${char === " " ? "\xa0" : char
}`;
});
};
one.classList.add("text");
one.innerText = textBlock.innerText;
splitText(one);
two = one.cloneNode(true);
one.classList.add("one");
two.classList.add("two");
textBlock.setHTML("");
textBlock.appendChild(one);
textBlock.appendChild(two);
gsap.set(textBlock, { height: one.clientHeight, width: one.clientWidth });
gsap.set(".text.two span", { yPercent: 100 });
let anim = gsap
.timeline({
defaults: { ease: Linear, stagger: { each: 0.025, from: "end" } },
})
.to(".text.one span", { yPercent: -100 })
.to(".text.two span", { yPercent: 0 }, "
I think you can do this with only CSS when you put each letter in a span element.
For the staggering effect you could add an data-attribute to each span and use a CSS calc formula to generate the staggering animation.
That way you don't have to target each letter via an nth-child selector and transition-delay value. You only need a interval value.
For sure, would love to see how you implement this, make a video on it? It would be nice to have a second option. Also, I find it difficult to implement on buttons, still working on it but not there yet. Maybe your solution would help…
@@andreaegli I created all kind of buttons long time ago and a staggeringing letter animation is one of them.
But I can't show you the demopage bacause when I paste an external URL, my comment will be removed by youtube..
Also for the effect you have to clone the button text.. You can do this via a data-atribute in the link of the button.
Each button widget has the option to add a custom attribute via the link options (the cog icon)
Imagine you have a button with text "show more"
If you want to clone that button text, you can go to link options of the button and create a custom attribute like this
data-text | show more
in CSS styles you create a psuedo element where you use the custom attribute as content,
content: attr(data-text);
The content of the psuedo will be text of your button.
One of my buttons has these styles:
selector {
overflow: hidden;
}
selector .elementor-button-link::before {
content: attr(data-text);
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: -100%;
color: aqua;
padding: inherit;
transition: 0.5s cubic-bezier(0.76, 0, 0.24, 1);
z-index: 2;
transform: rotate(-5deg)
}
selector:hover .elementor-button-link::before {
bottom: 1%;
transform: rotate(0deg)
}
selector:hover .elementor-button-text
{
transform: translateY(-200%) rotate(-5deg) !important;
opacity: 0
}
selector .elementor-button-text {
transform: translateY(0%) rotate(0deg)!important;
transition: 0.5s cubic-bezier(0.76, 0, 0.24, 1) ;
opacity: 1
}
Here are a few axemples
franktielemansbe/blog/doubling-text-via-data-attribute
Dot was removed between franktielemans and be. (otherwise CZcams will remove my comment)
@@franktielemans6624 write the link without the dot
@@teuccio73
good idea 🙂
franktielemansbe/blog/button-styles
Dot was removed between franktielemans and be
@@franktielemans6624 awesome, will give this a try! thanks again!!!
Wow , awesome!
😉 let me know if it worked for you!
Thanks for it!!
Welcome 🙏
Thank u so much.
You're most welcome
The website example - AG "helping founders grow their business" - what is the website url?
Here it is: golpys.co.uk/
Hii andrea, Great tutorial but i am having some issue implementing it when i hover on the heading it works but hover is effect is not working the text is going up but its not showing the hover color
Hi Andrea! I would like to know how you use Elementor and Framer. Do you think one will replace the other? Are you migrating to Framer like many designers? I would like to know your opinion since I feel that Elementor is also part of no-code.
At this point Framer is a little baby compared to Elementor, comparing the two is a bit futile BUT I prefer to stick with WP and whatever page builder like Elementor or bricks or smth else rather than get stuck into an ecosystem where you have to pay an arm and a leg to build complex websites. For example, I know someone who uses Webflow and was charged 20k (yes, no joke) for hosting because he has over 250k page views per month! He's website is a one pager...look up designjoy on Twitter, his name is Brett. So, don't chase shinny things....
amazing #andreaegli😍
🤓 thank you 🙏
Great! 👍👌👏🥰
Thank you 🤗
Would this be a good implimentation for a navigation menu? Thanks!
Absolutely!
what's the browser you use? or is it a chrome extension? It's neat how your browser can be toggled on the left.
It's called Arc browser, only available for mac for now
@@andreaegli sweet. How is it compared to Chrome or brave? And in terms of privacy/tracking?
This doesn't work on my website
I've seen your comment on another video and it seems to me that you are actually not trying very hard to fix your issues. If you just say that something doesn't work without explaining what you did step by step and what happened when it didn't work, nobody can help you. Please try explaining so I or someone in the community can help you. We are all here to help one another. I like to see people trying hard to find solutions to their errors. This is the only way you will learn anything. Don't just copy-paste. Now, explain to us, what is the issue?
@@andreaegli Hey, Thanks for your reply I really appreciate it. I have follow each and every step in this video but it seem that the txt is just not showing the hover animation I don't know the reason that why I reply. I am not being rude to you almost I have seen all your video I really love how easy you make uploading cool animation to your website. I have seen almost all your video and try to apply that in my website but I don't know that this hover effect and in that other gsap text revel video it doesn't work on my website.
Anyways, I really appreciate your content keep uploading new and cool videos. ❤️😊🤗
🙌
🤓
Hey it will be very great if you create a json template of the thing you are creating
hey, its not working can you help me?
you need to adjust the line-hight but keep in mind the size of your font. It's a matter of adjusting both in order for it to work accordingly. As you can see in the video, I already explain that..