PG1 Posted February 9, 2022 Share Posted February 9, 2022 Hi all, I'm hoping someone can direct me to an example pen I once saw on letting a user manually edit animation speed - buttons to switch to 2x, 5x etc. I seem to remember finding a codepen but now I cant! Link to comment Share on other sites More sharing options...
akapowl Posted February 9, 2022 Share Posted February 9, 2022 Hello @PG1 Was it maybe something like the latter example on this page? Here is an example which is a bit more simplified. On click you could either just set the timeScale of the tween to something different to adjust the speed, or even tween on the timeScale of the tween to make the adjustment between speeds smoother. I hope this will help. Happy tweening! See the Pen dyZvKvv by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
PG1 Posted February 9, 2022 Author Share Posted February 9, 2022 Thanks, yes like that but I should have mentioned I'm using React. I am setting the overall tl speed like so: W tl.current.timeScale(speed); then i'd like to be able to click a button and have that change. I'm trying to set speed to a different value on click, then have a use effect watch that and update the tl timescale if it changes: useEffect(() => { if (tl) { tl.current.timeScale(speed); } }, [speed]); The function is being called, and passing the if condition, but it causes the timeline to end, rather than changing it's speed. Link to comment Share on other sites More sharing options...
Cassie Posted February 9, 2022 Share Posted February 9, 2022 Hey @PG1 - what value is speed in your example. If it just really high and causing the timeline to immediately complete? 1 Link to comment Share on other sites More sharing options...
PG1 Posted February 9, 2022 Author Share Posted February 9, 2022 Hey @Cassie - nah thats not it. I normally have it set at 2. My first effort to implement this involves setting it to 1. It's also about a minute of animation so not something I can miss. Link to comment Share on other sites More sharing options...
PG1 Posted February 9, 2022 Author Share Posted February 9, 2022 Deleting as unnecessary Link to comment Share on other sites More sharing options...
PG1 Posted February 9, 2022 Author Share Posted February 9, 2022 OK I've fixed the issue with it breaking. The buttons now work to trigger the function, and if I log out 'tl.current' I can see the '_ts' property (second from bottom in the screenshot) on the timeline updates correctly. It's just that the animation speed does not change: Looks like maybe a parent timeline thing... Link to comment Share on other sites More sharing options...
Cassie Posted February 9, 2022 Share Posted February 9, 2022 Are your sub timelines nested or are you just triggering them from callbacks? It would be great if you could put together a minimal demo for us! Much easier for us to help debug. 1 Link to comment Share on other sites More sharing options...
PG1 Posted February 9, 2022 Author Share Posted February 9, 2022 I have a function that maps over an array, selects an animation for each item, adds them to a parent timeline within the function, then the function returns that parent timeline and I add that THAT timeline to the master timeline. Master timeline is at the component level, which is where I have all the code to set the speed. Appreciate a demo would be handy - but gonna take some time to strip out, i'll work on it Link to comment Share on other sites More sharing options...
PG1 Posted February 10, 2022 Author Share Posted February 10, 2022 On 2/9/2022 at 11:49 AM, akapowl said: Hello @PG1 Was it maybe something like the latter example on this page? Here is an example which is a bit more simplified. On click you could either just set the timeScale of the tween to something different to adjust the speed, or even tween on the timeScale of the tween to make the adjustment between speeds smoother. I hope this will help. Happy tweening! Thanks for this - i've converted it to a react version that reflects the way my project works here: See the Pen mdqmMWy by petegarvin1 (@petegarvin1) on CodePen I set my component up with references to the parent timeline and the box. I set up a useEffect so that when the speed variable changes (on button Click) it calls the function you suggested to use the new speed. (line 14). I have movementLeft and movementRight functions that specify a tween and return their own timelines. I have a generate function that combines these two timelines into another and returns it. Then on line 45 I add this generate function to the parent timeline. At first, clicking any of the speed buttons kicks off the animation fine, at the required speed. But try and chance the speed mid animation by clicking another button and weird things happen. Link to comment Share on other sites More sharing options...
Solution akapowl Posted February 10, 2022 Solution Share Posted February 10, 2022 Taking this example from the 'First Steps & Handy Techniques' guide for GSAP + React... See the Pen eYWGeGe by GreenSock (@GreenSock) on CodePen ... I was able to change it to something that at least does what you intended. See the Pen jOaBpgm by akapowl (@akapowl) on CodePen See the Pen GROWXop by akapowl (@akapowl) on CodePen Now I'm not sure if it follows a similar logic like what you need in the end, but maybe it can serve as some sort of pointer at least. Beyond that I do not have enough experience with React to be of any help with that I'm afraid. 2 Link to comment Share on other sites More sharing options...
PG1 Posted February 10, 2022 Author Share Posted February 10, 2022 Bingo - you legend, thank you so so much. You were correct - just by walking through that example I found my parent timeline setup was outside a useEffect - putting it in one fixed everything!! Project working. You guys are great! 2 Link to comment Share on other sites More sharing options...
akapowl Posted February 10, 2022 Share Posted February 10, 2022 Good to hear you've got it working, good job! 👍🙂 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