Pata Posted February 17, 2022 Share Posted February 17, 2022 Hello, I'm trying to modify the duration of a tween by using a variable that changes on a mousemouse event. I want the elements to rotate (move along the path) faster or slower depending on the mouse position. The variable is called "speed". As you can see on the Codepen link I'm trying to make this on the first tween: "duration: 20 + speed" but obviously it is not the correct way because when a transition is created it's not suposed to be modified. Sooo... there's a way? Many thanks in advance, See the Pen WNXdMPo by pataduprins (@pataduprins) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted February 17, 2022 Share Posted February 17, 2022 Hi Pata, While you can't update the duration, you can change the timeScale which will have the same effect. See the Pen YzEYawz by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Solution mikel Posted February 17, 2022 Solution Share Posted February 17, 2022 Hey @OSUblake, Simple and cool ... See the Pen jOaYzYz?editors=1000 by mikeK (@mikeK) on CodePen Happy speeding ... Mikel 4 Link to comment Share on other sites More sharing options...
Pata Posted February 17, 2022 Author Share Posted February 17, 2022 Wow, many thanks! I've already done it thanks to your tips! Updated! Many thanks @mikel & @OSUblake 2 Link to comment Share on other sites More sharing options...
mikel Posted February 17, 2022 Share Posted February 17, 2022 Hey @Pata, The circle could also be an SVG element. Then there's no problem with resize. Happy tweening ... Mikel 2 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