How to recalculate props before "Reverse"

[iDVB]

We have this animation that turns animates a PURPLE circle with respect to a RED circle to feel the full screen.

Then when you close that (close button) it should animate back to the other circle. 

 

This currently works ONLY if you do not change the position of the RED circle by scrolling the page while the purple one is open.

https://codesandbox.io/s/vigilant-snow-yhf5q?file=/src/Circle.js

 

Is there some way to "recalculate" the props (location) of the circle when reversing?

 

Cheers!

See the Pen Circle.js by s (@s) on CodePen

[ZachSaucier]

36 minutes ago, iDVB said:

Is there some way to "recalculate" the props (location) of the circle when reversing?

Not really. Why not use two separate animations if the user has scrolled? Or just two separate animations all the time.

[iDVB]

Yup... just wanted to be sure there isn't a simple built in way that lets me use the same timeline. Since its the exact same.... just needs to be recalculated. 

Edited July 28, 2020 by iDVB