translate not working properly

[artstyle]

translate X changes the rotateY attribute too, why?

i just want to move the image from right to left

 

and you can see how it glitches at the end

whyyy?

See the Pen GRZWdeB by aptypkaa (@aptypkaa) on CodePen

[Shaun Gorneau]

It's not translating the Y,  it's simply scrolling the element in the window (in the natural layout) before after the ScrollTrigger start/end points.

[artstyle]

yes thats what i want to achieve.

but if you look closer it changes rotateY property too even if i didnt want to. and it glitches an the end i dont know why

[ZachSaucier]

You made one of the most common GSAP mistakes: not setting all of your transforms with GSAP: 

Do that and it'll work properly.

[ZachSaucier]

Alternatively you could create a container for the element that you want to translate (that has the transform applied) and animate the container instead. That way there are no conflicting transforms.

[artstyle]

11 minutes ago, ZachSaucier said:

You made one of the most common GSAP mistakes: not setting all of your transforms with GSAP

 

what do u mean?

section4tl.to(".test",{x: 0, perspective: 2000, rotateY: 55,});

i tried this and this doesnt work

could you please fix it on my example

[ZachSaucier]

See the Pen VwapJvO?editors=0010 by GreenSock (@GreenSock) on CodePen

[artstyle]

nope.
its still changes the rotate Y attr... look closer

[Shaun Gorneau]

I think what you're interpreting as rotation on the Y axis is actually the perspective shift due to it translating on the x axis.

[ZachSaucier]

If you don't want the perspective change, don't use perspective  You can get your element to look similarly by combining rotate with skew. Then it won't be affected by the position within the window.

[artstyle]

i was thinking about the problem with perspective but i cannot find any solution.
i want to do the animation in 3 steps
1. move from right to center without any changes(there will be multiple images)

2. then make a sharp turn rotateY 55deg to 0deg

3. and then decrease image size and fade off

[ZachSaucier]

Sorry, I don't understand the issue. You can do all of those things without using perspective.

[Shaun Gorneau]

@artstyle

 

Based on what you bulleted out, you could do something like this

 

See the Pen oNxWNVg by sgorneau (@sgorneau) on CodePen

[artstyle]

thanks but skew its not something i want to... perspective is good but..

[Shaun Gorneau]

On 8/26/2020 at 3:35 PM, artstyle said:

thanks but skew its not something i want to... perspective is good but..

 

At this point, I'm at a loss for what you're looking for. 

 

I think I might know what you're looking for (codepen in next comment)

[Shaun Gorneau]

Is this more along the lines of what you're looking for ... unaffected persepctive?

 

See the Pen wvGdBRQ by sgorneau (@sgorneau) on CodePen