Issues with Scroll Triggered animation on fixed element using CSS and Javascript

I have image animation that animates as the user scrolls down the page using CSS and Javascript and I have a fixed container so that the image animates in place as the user scrolls down. Once it is at a certain spot on screen below, it switches to relevant positioning to keep it in the parent element. I am having trouble getting it to return and scroll back up when user scrolls up again.

Here is link to the page: https://6bq.107.myftpupload.com/product/black-cherry-star-tabs/

I have tried animating this different ways but needs to have the long scroll effect while image is fixed. I am thinking I need to maybe add some additional JS to be able to scroll back up once it hits the stop area. I had to change the position from fixed to relevant to get it to stop at the stop point inside the parent div.

Please, any help appreciated.