poc: generic scroll transform component to support scroll-based animations

[adamstep]

Summary

This PoC takes the ideas of scroll-opacity and makes it more generic, allowing scroll position to control all types of styles and transforms. It also allows multiple transforms to be applied to the same container.

The syntax looks like this:

    <scroll-transform:container
      xmlns:scroll-transform="https://hyperview.org/scroll-transform"
      style="red-square"
    >
      <scroll-transform:transform
        context-key="scroll-view"
        transform-attr="translateX"
        scroll-range="[100, 400]"
        attr-range="[-100, 100]"
        axis="vertical"
        duration="1"
      />
      <scroll-transform:transform
        context-key="scroll-view"
        transform-attr="scale"
        scroll-range="[100, 400]"
        attr-range="[1, 0.3]"
        axis="vertical"
        duration="1"
      />
    </scroll-transform:container-->

The container element is the one where the transforms will be applied. In this example, we apply a "translateX" transform and a scale transform over the same scroll range. Note the scroll ranges can be different. Transforms can also be applied to styles like opacity.

Implementation

• Added a new ScrollTransform component.
• This component reads the same scroll offsets context as the existing ScrollOpacity component.
• The new component renders an Animated.View RN component with the provided style and children. The transform elements are used to drive Animated values that are added as extra styles to the root component.

Screenshots

Example of a scroll transform used to fade in/out a title bar, and scale the photo (on negative scroll):

scroll_transform.mp4