Tanvi_Patel Posted May 24, 2022 Share Posted May 24, 2022 Hey, Can anyone help me with with this. Here the line animation is in horizontal which is perfect but i want to transform the text vertically like cuberto like in the header on hover. https://cuberto.com/ I am just confused with the changing coordinates. See the Pen YzerrMb by niyamvora (@niyamvora) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted May 24, 2022 Share Posted May 24, 2022 Hi there's no GSAP in this pen - why don't you give it a go and then post back? This should give you a jump start... Link to comment Share on other sites More sharing options...
elegantseagulls Posted May 24, 2022 Share Posted May 24, 2022 Hi @Tanvi_Patel Is this a GreenSock-related question? - You don't have any JS in your CodePen, and all of your animations are done via CSS. We are happy to help you with GSAP questions, but don't have the resources to custom-code UI components for people here. I'd suggest looking at the GSAP documentation or checking out one of the many great resources for learning.https://www.creativecodingclub.com/https://www.motiontricks.com/ Understanding transforms will also be important: https://developer.mozilla.org/en-US/docs/Web/CSS/transform 4 Link to comment Share on other sites More sharing options...
Tanvi_Patel Posted May 24, 2022 Author Share Posted May 24, 2022 Actually i saw it on the cuberto website, since they are using gsap i thought there would be a prebuilt in function for this. That was the reason i posted it. Link to comment Share on other sites More sharing options...
Cassie Posted May 24, 2022 Share Posted May 24, 2022 Oh no - sorry. GSAP doesn't offer pre-made effects. Think of GSAP like a toolbox full of tools. You can use the tools to make pretty much anything, the strength is in the flexibility. 3 Link to comment Share on other sites More sharing options...
Dennyno Posted June 8, 2022 Share Posted June 8, 2022 Cuberto, GSAP and "prebuilt" is a ternary that doesn't work at all @Tanvi_Patel I couldnt find the animation you are talking about, btw, you may just change your code, even starting with CSS, till the gsap versioning. You're translating your code on the X axis, (the first parameter on the translate3d); while you need the second one. Being you working in a 3D space, you gotta thing about X, Y, Z. Good luck 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