mylismyli Posted July 15, 2020 Share Posted July 15, 2020 Hello everyone I am trying to animate a tractor on a svg path (see red one in the codepen - just scroll a bit) and I am using ScrollTrigger to make the tractor follow the mouse scroll. Now I want that the tractor turns in the other direction if I am scrolling up. Technically that would be done by changing the autoRotate of the motionPath to -90 instead of 90. But it isnt updating. I am new to Greensock and animation in general, so any help is appreciated My Goal is that the tractor is not only facing in the other direction but to really turn it around like it is going an a curve (like the car on this site http://rit-team.ru/). Any idea concerning this would also be great. Thanks and all the best, Myli See the Pen KKVxJVq by mylismyli (@mylismyli) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 15, 2020 Share Posted July 15, 2020 Hey Li and welcome to the GreenSock forums. 5 minutes ago, mylismyli said: My Goal is that the tractor is not only facing in the other direction but to really turn it around like it is going an a curve To do this you'll need to have two layers of animation for the rotation: one for rotating along the path and another for the direction of the tractor. I'd set it up along the lines of this: See the Pen GRoXzYj?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
mylismyli Posted July 15, 2020 Author Share Posted July 15, 2020 Wow thanks for the quick reply!! What would I need to change if I want the turning loop to be a bit bigger? Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 15, 2020 Share Posted July 15, 2020 4 minutes ago, mylismyli said: What would I need to change if I want the turning loop to be a bit bigger? Just add a duration to the tween that is rotating the tractor Link to comment Share on other sites More sharing options...
mylismyli Posted July 15, 2020 Author Share Posted July 15, 2020 7 minutes ago, ZachSaucier said: Just add a duration to the tween that is rotating the tractor If I do that it just rotates the tractor slower. I mean is it possible to turn the tractor around on bigger turning-path, like really breaking out of the red-default path. Just like the car from this site: http://rit-team.ru/ Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 15, 2020 Share Posted July 15, 2020 Sure, you'd use the same concept but you'd have to write a more complex function than just a simple tween. 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