bromel Posted February 28, 2021 Share Posted February 28, 2021 Hi all ☺️ What I have done is created a timeline that plays a simple animation but in time this will be replaced by a more complex one in React. In my example I have created a drop-down menu with various cities to select and I am wanting to control the progress of the animation based on this selection. As you can see I am able to change the progress value for my tween, but I am getting unexpected results. I assume that i am just approach this wrong so I was wondering what is the best way to achieve this in React. Many thanks. Bromel P.S It seems that my method doubles the duration of the tween, but I don't know why? See the Pen KKNovLN by w9914420 (@w9914420) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted March 1, 2021 Share Posted March 1, 2021 I'm not a React guy and I don't have much time to look into this but I definitely saw a few problems at my cursory glance: You keep adding a 3-second tween to the same timeline each time a new selection is made - that's why the duration keeps going up. Why are you using a timeline at all? Usually those are for grouping animations and controlling them as a whole. At the very least, you could clear() the timeline before you add another to(). I don't think transform: "translate(100px)" is valid - the translate() is supposed to have an x and y value. But I'd strongly recommend NOT animating the "transform" attribute at all - just use the individual transform component shortcuts like "x", "y", "scaleX", "rotation", etc. instead because those are optimized for speed and make your code more readable/concise. Happy tweening! 2 Link to comment Share on other sites More sharing options...
bromel Posted March 1, 2021 Author Share Posted March 1, 2021 Hi Jack, Thank you for getting back to me just to clarify. Quote I don't think transform: "translate(100px)" is valid - the translate() is supposed to have an x and y value. But I'd strongly recommend NOT animating the "transform" attribute at all - just use the individual transform component shortcuts like "x", "y", "scaleX", "rotation", etc. instead because those are optimized for speed and make your code more readable/concise. I based the use of 'translate(100px)' from the MDN Web Docs - translate() but I complete understand your point in regards to speed and readability. Quote You keep adding a 3-second tween to the same timeline each time a new selection is made - that's why the duration keeps going up. Why are you using a timeline at all? Usually those are for grouping animations and controlling them as a whole. At the very least, you could clear() the timeline before you add another to() So this is part which I am trying to comprehend, just for some background I have based my example on this pen See the Pen mdeoemx by GreenSock (@GreenSock) on CodePen which is just using JavaScript and works similar to my react example. hence the use of the timeline. Link to comment Share on other sites More sharing options...
bromel Posted March 1, 2021 Author Share Posted March 1, 2021 Hi all, Just been back and had another look at this and changed a few things. 1. Using transform shortcuts 2. Stopped adding duration on selection. See the Pen wvojBQV by w9914420 (@w9914420) on CodePen I am just trying to understand this. //tween the animation in accordance to it's progress gsap.to(tl.current, { duration: 1, progress: count }); My expectation is that when it is called it should tween the animation forwards or backwards in process? regards Bromel Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted March 1, 2021 Solution Share Posted March 1, 2021 52 minutes ago, bromel said: My expectation is that when it is called it should tween the animation forwards or backwards in process? It does, but you're creating a new animation each time... So the progress of the new animation is being set each time. See the issue? If you include the timeline and tween creation in a useEffect with [] as the second parameter it works as I think you're wanting it to work: See the Pen jOVxqVV?editors=0010 by GreenSock (@GreenSock) on CodePen 2 1 Link to comment Share on other sites More sharing options...
bromel Posted March 1, 2021 Author Share Posted March 1, 2021 @ZachSaucier many many thanks 😍 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