artstyle Posted August 26, 2020 Share Posted August 26, 2020 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 Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted August 26, 2020 Share Posted August 26, 2020 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. Link to comment Share on other sites More sharing options...
artstyle Posted August 26, 2020 Author Share Posted August 26, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 You made one of the most common GSAP mistakes: not setting all of your transforms with GSAP: Do that and it'll work properly. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 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. Link to comment Share on other sites More sharing options...
artstyle Posted August 26, 2020 Author Share Posted August 26, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 See the Pen VwapJvO?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
artstyle Posted August 26, 2020 Author Share Posted August 26, 2020 nope. its still changes the rotate Y attr... look closer Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted August 26, 2020 Share Posted August 26, 2020 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. 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 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. 1 Link to comment Share on other sites More sharing options...
artstyle Posted August 26, 2020 Author Share Posted August 26, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 Sorry, I don't understand the issue. You can do all of those things without using perspective. Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted August 26, 2020 Share Posted August 26, 2020 @artstyle Based on what you bulleted out, you could do something like this See the Pen oNxWNVg by sgorneau (@sgorneau) on CodePen 3 Link to comment Share on other sites More sharing options...
artstyle Posted August 26, 2020 Author Share Posted August 26, 2020 thanks but skew its not something i want to... perspective is good but.. Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted August 26, 2020 Share Posted August 26, 2020 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) Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted August 26, 2020 Share Posted August 26, 2020 Is this more along the lines of what you're looking for ... unaffected persepctive? See the Pen wvGdBRQ by sgorneau (@sgorneau) on CodePen 1 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