Damn, I was expecting this diagram to be clear when I wrote the article but I shouldn’t forget I loved maths when I was young, which is maybe not typical for UX Designers
BTW, you noticed that in the sample I sent you that you didn’t need any linear converter. The scroll offset (in percentage) of the panorama collection is purely equal to the scroll offset of the slider collection. This math equation is called “identity”, where for y = a*x+b, a = 1 and b = 0, meaning we have y = x. In the diagram, it means that output A = input A and output B = input B. You could use any number there, such as output A = input A = 0 and output B = input B = 100.
Let me try to take another example to describe what the diagram means. To create an animation where an image (at the bottom) is aligned with another one (at the top) on the left edge of screen, but reaches the right edge of the screen when the top image only reaches its center, I’ll take 2 “pictures” of that animation. These will be the A & B point used to compute the linear converter parameters.
Point A: I want the 2 images aligned on the left edge. The X property equals 191px for both images, for both input and output.
Point B: I want the bottom image to be aligned to the right edge of the screen when the top image is at the center. The output will be 1729px when the input is 960px.
Let’s put these values in the linear converter properties.
And here’s the result within Composer. The bottom image follows the top image with a linear interpolation rule.
I hope this clarifies these Input / Output things.