PG1

Hi, Is there a way to set multiple functions to occur at either point in a timeline? I'm using single functions fine, but need to call more than one.

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!

Thanks for this - i've converted it to a react version that reflects the way my project works here: https://codepen.io/petegarvin1/pen/mdqmMWy 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.

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

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...

Deleting as unnecessary

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.

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.

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!

oh thats ideal - thanks. It says it slows to 2fps... assuming running at 1x, whats the standard fps for GSAP?

Is there a way I can control if an animation pauses when tab isn't active? Ideally I'd like it to run in the background

Interesting - i had no idea - thank you!!

Hi, I have been successfully playing audio on timeline complete in this pen until today. Something seem to have changed - console errors shown below are saying the play function is failing because there has been no document interaction. Anyone have any ideas? I've always had these animations play automatically on page load so I have no idea what this is looking for

Im removing my question - was being an idiot

So my new questions is are there any gotchas with onComplete? I just added it with a simple function call to set a state variable in react. It cause my entire animation (and the rest of the page to stop rendering... Working on a very complex component so won't be easy to strip out - but any general things to be wary of when implementing? It seems to be causing too many re-renders then react errors to stop an infinite loop