How do I create a magnifying scroll rect?

Can you get the distance from the center of your scrolling area to the position of the icon? You could use that to determine a scale multiplier.

Get the distance of the icon from the center and divide that by the total distance from the edge of the scroll rect to its center. That will give you a percentage value that represents how close to the center the icon is. You can then set the localscale of the icon using this percentage value.

 // The total width of the scroll rect
 float rectWidth = 1000f;
 // How far from the edge the center is: 500f
 float rectCenter = rectWidth / 2f;
 
 // The x position within the scroll rect
 float iconPosX = 200f;
 // The distance to the center: 300f
 float iconFromCenter = rectCenter - iconPosX;
 
 // a percentage value that represents the percentage from the
 // edge to the center that the icon is: 0.4f
 float percentToCenter = 1 - (iconFromCenter / rectCenter);
 
 
 icon.transform.localScale = new Vector3(percentToCenter, percentToCenter, percentToCenter);
 

Now this formula by itself will cause your icon to completely scale from 0 to 1. It sounds like you won't want that, you'll probably want the scaling to go from 0.5f to 1f, and we can make that work as well.

 // Represents the total percentage range that you want to scale within
 float validRange = 0.5f;
 
 // Calculate out the real scale value
 float scaleValue = 1 - (validRange * percentToCenter);
 
 icon.transform.localScale = new Vector3(scaleValue, scaleValue, scaleValue);