david08 Posted November 8, 2023 Share Posted November 8, 2023 Hi everybody I see this website page, and I see the button effect Can you give me an example of its code? Sorry I don't have a codepen I just need to refer to its text effect Thanks all! var e = t.querySelectorAll("[data-hover-animation-first-el] [data-hover-animation-str]"); mi.fromTo(e, { y: "0%" }, { y: "-100%", ease: "power4.easeOut", stagger: { each: .015 } }); var n = t.querySelectorAll("[data-hover-animation-second-el] [data-hover-animation-str]"); mi.fromTo(n, { y: "0%" }, { y: "-100%", ease: "power4.easeInOut", stagger: { each: .024 } }) Website: https://nakatani-tac.jp/ https://gyazo.com/8740ec7ff8c4450812fe813377ecfe3d Link to comment Share on other sites More sharing options...
mvaneijgen Posted November 8, 2023 Share Posted November 8, 2023 Hi @david08 welcome to the forum! We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. That said, it looks like just a stagger effect on the text with the SplitText plugin https://gsap.com/docs/v3/Plugins/SplitText/ I would say, try your hand and the effect with the SplitText plugin on Codepen and when you're stuck post back here with a minimal demo. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen Sidenote: try changing your .fromTo() to a .from() GSAP will animate to the browser defaults, so no need to define a .fromTo() if if's not needed. and also check out yPercent that is build for percentage based values! Hope it helps and happy tweening! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now