feralroo

Appreciate you taking the time to respond @Rodrigo, I wasn't aware of the ability to add to the context like that - reading about it now. The below may be pretty hard to follow but I'll try my best: I think my main issue is that I am relying on ctx.revert() to prevent me getting into .from logic errors on the animateOut() but of course it is also resetting the animation values on the element generated by the animateIn()so when the animateOut() interrupts the animateIn()rather than the .from making it a nice transition, it's doing .from the reverted/default values as defined by the css. I've unpacked what I'm doing wrong - I just can't crack a way to do it better and avoid those .from logic errors. I hope to hold on to the .from vs doing .fromTo as I want to be able to dynamically animate from whatever state the elements are in when a user clicks a new button and interrupts the animation. Living in hope that someone clever might have encountered this before and can help get me unstuck! Cheers, Roo

Demo: https://stackblitz.com/edit/nextjs-atnnzx?file=pages%2Findex.js Hello, I am working in React/Nextjs trying to create a component consisting of multiple scenes and tab-like buttons to switch between them. The components in each scene have in and out animations using opacity to create smooth fade transitions between each scene change. Due to the animations being triggered by user input it is highly likely they will be interrupted, so to help keep things smooth I've used.to on the out animations with the intention they animate out from whatever state they were before animating in the next scene. I'll skip over my current understanding of why it currently isn't working as I'd hoped but at the moment when you click between the buttons and the active scene index changes,ctx.revert()gets called and the out animation animates out from a reset state so it's not smooth unless the in animation has completed. I've bashed my head against this for hours, I cannot work out how to approach this. revert()needs to get called because otherwise I run into.from logic issues but I'm not sure at which place to call it. I've tried moving ctx.revert()to get called at the end of a timeline but that causes all sorts of confusion - I've a feeling I need multiple timelines and alternate between them during scene switches but am not sure how to implement and the stress of a deadline is causing my tiny brain to tighten up to the point I cannot think creatively. I've created a minimal demo here with 3 scenes, and would really appreciate some help from the community: https://stackblitz.com/edit/nextjs-atnnzx?file=pages%2Findex.js Here for any questions if I've not communicated my issue properly. Thanks Roo