Sacha Posted December 9, 2021 Share Posted December 9, 2021 Hey again, I'm working on my animated mobile navigation. Before this, I used one timeline, and did .reverse() when it closes, but I want to change the closing animation. So I create a second timeline. So for the code I use something like this: const [open, setOpen] = setState(false); const timeline1 = useRef(); const timeline2 = useRef(); useEffect(() => { if (open) { timeline1.play(); } else { timeline2.play(); } }, [open]} <button onClick={() => setOpen(!open)}> This works fine when opening and closing the navigation once, but after that, the style wont change. It's like the timeline would have applied the "once: true" attribute. I tried recreating it in a sandbox, but there I'm having even more problems. I can't even make it work once, and I don't know why... See the Pen by s (@s) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted December 9, 2021 Share Posted December 9, 2021 Hi @Sacha It's impossible to answer this from a code snippet like that. Can you make a minimal demo on CodeSandbox showing the issue? https://codesandbox.io/s/gsap-react-starter-ut42t?file=/src/App.js Link to comment Share on other sites More sharing options...
Solution PointC Posted December 9, 2021 Solution Share Posted December 9, 2021 If I had to guess, I'd say you were looking for one of these: timeline1.play(0); timeline1.restart(); If not, a minimal demo would be helpful. Happy tweening. 1 Link to comment Share on other sites More sharing options...
Sacha Posted December 10, 2021 Author Share Posted December 10, 2021 Thank you, I will try that which should work. Btw I created a demo when I wrote my first question. Here's the link again. https://codesandbox.io/s/reverent-star-il30g EDIT .play(0) works great, thank you. Sorry for this silly question, should have known this was the issue.. 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