CMS Interactions - H1 Header Scroll Animation

So, I am trying to animate a single element within my cms collection. The collection showcases some of my recent branding projects and I want the title or in this consideration, the name of the client to scale down in size from 10 em to 3em as the user scrolls through the page.

The end result should have the title of the project (client name) nestled in the upper right hand corner with appropriate space and a smooth transition. I currently have the animation set in place by utilizing the variables attributes of the site. But, the animation is buggy and as you scroll through the title (client name) for the previous project ( the one most recently viewed and would be escaping from the view port resets the animation and it looks clunky and disorganized.

I hope I was able to describe it accurately enough so you kind of have a visual of the complication but just for further clarification I’ll leave a link below for the build, hoping there is a possible solution to this issue and if there isn’t a possible way around it that keeps the site dynamic and functional. open to all suggestions, thank you !

Keep in mind:
Im aware of the functional aspect or considerations of using Webflow CMS so no need to provide any ancillary information in references to the features/capabilities.

Here is my public share link:

[Webflow - LogoInk]