alal111 Posted May 3, 2023 Share Posted May 3, 2023 I cannot flip the car image and it always appears backwards. What am i doing wrong? And i want to show the text when the car is near red points, and hide it after, but i cannot figure it out. Any help would be appreciated) See the Pen MWPOmoo by alal111 (@alal111) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted May 3, 2023 Share Posted May 3, 2023 Hi, @Cassie already solved the same problem for another user here: Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
alal111 Posted May 3, 2023 Author Share Posted May 3, 2023 14 minutes ago, Rodrigo said: Hi, @Cassie already solved the same problem for another user here: Hopefully this helps. Happy Tweening! i have seen this, and this See the Pen GRoXzYj by GreenSock (@GreenSock) on CodePen but for my example it doesnt work somehow, cant understand where my mistake Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted May 3, 2023 Solution Share Posted May 3, 2023 Hi, The reason for that is because in those examples the element that follows the path, soto speak, is a wrapper for the element that rotates. So in Cassie's example that arrow is wrapped around a <g> tag. That particular <g> tag is the one that follows the path, the arrow is just a free loader that goes for the ride and just rotates according to the scroll direction . So in your case you have to wrap your car around an element and tinker a bit with your code and CSS. Here is a fork of your codepen, you can see the red box around the car is the one that is attached to the path: See the Pen MWPOQmo by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
alal111 Posted May 4, 2023 Author Share Posted May 4, 2023 12 hours ago, Rodrigo said: Hi, The reason for that is because in those examples the element that follows the path, soto speak, is a wrapper for the element that rotates. So in Cassie's example that arrow is wrapped around a <g> tag. That particular <g> tag is the one that follows the path, the arrow is just a free loader that goes for the ride and just rotates according to the scroll direction . So in your case you have to wrap your car around an element and tinker a bit with your code and CSS. Here is a fork of your codepen, you can see the red box around the car is the one that is attached to the path: Hopefully this helps. Happy Tweening! Thank you very much, it helped a lot 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