Jump to content
Search Community

Animate RotationX and Y

ale269 test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hi all, I'm starting to use gsap now and I'm still trying to learn, I wanted to give a rotation effect on the x and y axes during scrolling.
The problem is that by writing the line of code:

 

gsap.fromTo(".element", {rotationY: "20deg", rotateX: "20deg", perspective: 500}, {scrollTrigger: {trigger: ".element", scrub: 1, start: "top bottom", end: "bottom top"}, rotationY: "-20deg", rotationX: "-20deg",  perspective: 500, duration: 1});


the result is not the desired one, in fact the element seems to bounce and perform the animation in reverse.
I tried to figure out the problem but couldn't find anything by searching, could you help me?

 

I'm probably misspelling the values but I can't find any guidance on how to use RotateX and RotateY correctly

Link to comment
Share on other sites

Hi @ale269 and welcome to the GreenSock forums!

 

Is really hard for us to to see what could be the issue without a minimal demo, so please try to create one that clearly illustrates the issue you're having.

 

For what I can see in the small code you posted, the issue could be the fact that you're setting the perspective on the same element. Also there is no need to pass strings to the rotation values, just use numbers.

 

Here is a codepen that shows how to create 3D animations using GSAP:

See the Pen AWQprN by GreenSock (@GreenSock) on CodePen

 

Finally a good advice is to avoid using ScrollTrigger when you start working on your projects. Just remove it and add it back once your animations are working as expected. Right now having ScrollTrigger in the mix, doesn't help to see what the issue is on the animation because the animation's progress depends on ScrollTrigger so is better to remove it until your animations are working correctly.

 

Happy Tweening!

Link to comment
Share on other sites

hello and thanks for the reply, this is the link to the codepen example.I don't know exactly what you mean with the perspective problem, did I get the position of the property wrong within the line of code?However what I would like to obtain is a shift in the rotation on the axes, which starts with a negative angle (tilted clockwise) and performs a tilt counterclockwise during the scroll, which ends when the element leaves the viewport.I'm not sure if the code I wrote is the best to achieve this goal, I'm open to any clarification. Unfortunately I can't find any documentation to achieve what I'm looking for.Thanks in advance

 

See the Pen JjBOOGX by alemanfre26 (@alemanfre26) on CodePen


Link to comment
Share on other sites

1 hour ago, ale269 said:

I don't know exactly what you mean with the perspective problem, did I get the position of the property wrong within the line of code?

There isn't really an order in which you need to place GSAP properties, however If you want perspective in CSS you'll need to add the perspective property to the container and have the effect on the children of that container. 

 

I've also moved your tween to a timeline, that way the code is way more readable and easier to understand. Personally I've find the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. That's what I did I've disabled ScrollTrigger so that we can see what the animation is doing. When you're happy with it you can enable ScrollTrigger again to see how it looks on scroll. Hope it helps and happy tweening! 

 

See the Pen NWBwXMN by mvaneijgen (@mvaneijgen) on CodePen

Link to comment
Share on other sites

Thank you for replying!, surely the timeline is much more readable and I will use it in the future.
maybe I expressed myself badly, the problem is not in the scroll trigger, the problem is that I can't create the animation I want and I don't understand why.
I would simply like the element to start with a negative Y rotation angle (example -20deg ) and go towards a positive Y rotation angle (example 20deg).
For some reason I don't get this result, the element starts to oscillate between angle 0deg and 20deg, or it seems to start from a positive deg, which I don't understand the value of, and get to 20deg.
I can't understand the logic of the animation to get the desired effect.
I hope I made myself clear, otherwise in the next answer I include an image of how I would like the animation to start and how I would like it to end.

Link to comment
Share on other sites

  • Solution

Hello @ale269

 

Here is what the docs of the CSSPlugin say about perspective on 3D Transforms

 

Quote
//apply a perspective to the PARENT element (the container) to make the perspective apply to all child elements (typically best)
gsap.set(container, {perspective: 500});

//or apply perspective to a single element using "transformPerspective"
gsap.set(element, {transformPerspective: 500});

 

Also; when you are going to transform an element in a way that it will change its dimensions (especially the y dimension, in case of vertical scrolling) on the page, you shouldn't use it as the trigger element for your ScrollTrigger, as it will llikely throw of the start and end of the ScrollTrigger in comparison to what you would it expect them to be - better use a wrapping element as the trigger instead.

 

Is this more in the direction of what you wanted to achieve?

 

See the Pen PoBORGR by akapowl (@akapowl) on CodePen

  • Like 2
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.
×
×
  • Create New...