How can I use css animations to do this based on scroll position?

This example works but I'm wondering if there is a better way.

Ideally a solution that would let me update a transitions keyframe based on scroll position or something. That way I don't have to handle the complex computations in javascript.

Any help or insight would be greatly appreciated.

https://jsfiddle.net/chrischilcoat/19dp24ou/

Update method called using this.

<div ref={pager} onScroll={update} class="relative w-full overflow-x-auto scrollbar-hide">

Update Method.

 const update = () => {
    const currentScrollLeft = pager.current.scrollLeft;
    currentScrollLeft < 125 ? setScrollPosition(currentScrollLeft) : setScrollPosition(125);
    toggleNextBtn();
  }

Then I update the styles needed based on scroll position.

const [scrollPosition, setScrollPosition] = React.useState();

  const pager = React.createRef();

  const addWrapperStyles = { 
    'height': (215 - (scrollPosition / .75))+'px',
    'width': (130 - (scrollPosition / 1.7))+'px',
    'borderBottomLeftRadius': (0) +'px',
    'borderBottomRightRadius': (15 + (scrollPosition / 8)) +'px',
    'borderTopLeftRadius':  (0) +'px',
    'borderTopRightRadius': (15 + (scrollPosition / 8)) +'px',
    'paddingTop': (scrollPosition / 15.5)+'px',
  };
  const addImageStyles = {
    'height': (166 - scrollPosition / .92)+'px',
    'width': (166 - scrollPosition / .92)+'px',
    'borderRadius': (scrollPosition / 2)+'px'
  };
  const addPlusStyles = { 
    'marginRight': (scrollPosition / 4)+'px',
    'height': (25 - scrollPosition / 16)+'px',
    'width': (25 - scrollPosition / 16)+'px',
    'borderWidth': '1px',
    'right': (scrollPosition / 7)+'px',
    'marginLeft': ( scrollPosition / 32)+'px'
  };
  const addTextStyles = {
    'opacity': '.08'
  };

React then handles inserting the new inline styles.