Jump to content
GreenSock

Tanvi_Patel

Text transform Vertical

Recommended Posts

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

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

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

  • Like 4
Link to comment
Share on other sites

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

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.

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×