Please advise me on the effect of the website

[david08]

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

 

[mvaneijgen]

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!