Cheatsheet

<soulmagic id="fades" users=".fades-parent">

    <set targets=".fades-target">
        <opacity>0</opacity>
        <x>1rem</x>
        <y>200px</y>
        <scale>.75</scale>
        <rotation>45</rotation>
        <background-color>blue</background-color>
        <width>50%</width>
    </set>

    <event type="scroll">
        <start>top 75%</start>
        <end>top 25%</end>
        <scrub>true</scrub>

    </event>

    <timeline>
        <to targets=".fades-target">
            <opacity>1</opacity>
            <x>0</x>
            <y>0</y>
            <scale>1</scale>
            <rotation>0</rotation>
            <background-color>green</background-color>
            <width>100%</width>

            <duration>2</duration>
            <ease>none</ease>
        </to>
    </timeline>

</soulmagic>