How to get DOM elements x position after animation

[Wizard of Oz]

Hi, I am trying to recreate this gallery: https://nation.africa/kenya/photos/lifestyle/oscars-2023-winners-celebrate-4156402
 

My plan is to animate in a new card by altering the parent divs' getBoundingClientRect x value on each button click.
1. But when I print the values on the console after the animation runs, I don't see any change in any of the "elemRect" values. Why is that?
2. What would be a smart way of identifying that I've reached the end of my gallery?
3. There is a hitch where I need to press both buttons 2 times for them to navigate in the different direction, any idea what's causing that?

Thanks for any advice 

See the Pen NWLJOxg?editors=1111 by martinkariuki7-the-looper (@martinkariuki7-the-looper) on CodePen

[Cassie]

Hi there!

I'm not sure exactly how much you want to shuffle them along each time, but maybe something like this? Make a tween and then animate the progress and clamp the value between 0 and 1 so it won't ever overshoot.

See the Pen abaMgmd?editors=1011 by GreenSock (@GreenSock) on CodePen

[Wizard of Oz]

Thanks Cassie! Exactly what I needed