In View Classes

<div class="frctl-section frctl-class-demo frctl-class-demo--group">

    <p style="margin-bottom: 2.4rem;">In View Animations</p>
    <p class="f-text--small" style="margin-bottom: 2.4rem;">Elements with the class <code>js-watch</code> will be observed for entry in the viewport. When they are, the class <code>is-in-view</code> will be added. This can be used to add in-view css changes, however the following utility classes have been created:</p>

    <div style="padding: 0 2.4rem;">

        <div class="frctl-class-demo__text">Parent class: <code class="fractal-code frctl-class-demo__class-name">js-watch u-watch--fade-up</code></div>
        <div class="frctl-section__entry">
            <div class="js-watch u-watch--fade-up" style="overflow: hidden; max-width: 40rem;">
                <img src="/images/journal/dino-on-truck.png" alt="">
                <p style="margin-top: 2rem;">Fade Up</p>
            </div>
        </div>

        <div class="frctl-class-demo__text">Parent class: <code class="fractal-code frctl-class-demo__class-name">js-watch u-watch--fade-blur</code></div>
        <div class="frctl-section__entry">
            <div class="js-watch u-watch--fade-blur" style="overflow: hidden; max-width: 40rem;">
                <img src="/images/journal/dino-on-truck.png" alt="">
                <p style="margin-top: 2rem;">Fade Blur</p>
            </div>
        </div>

        <div class="frctl-class-demo__text">Parent class: <code class="fractal-code frctl-class-demo__class-name">js-watch u-watch--img-shrink</code></div>
        <div class="frctl-section__entry">
            <div class="js-watch u-watch--img-shrink" style="overflow: hidden; max-width: 40rem;">
                <img src="/images/journal/dino-on-truck.png" alt="">
                <p style="margin-top: 2rem;">Image shrink</p>
            </div>
        </div>
    </div>
</div>

<div class="frctl-section frctl-class-demo frctl-class-demo--group">

    <p style="margin-bottom: 2.4rem;">Delayed In View Animations</p>
    <p class="f-text--small" style="margin-bottom: 2.4rem;">In view animations can be delayed by adding a class of <code>u-watch--delay-[1-10]</code> in addition to any of the above classes, where each number increase from 1 - 10 will result in a delay of that number time 0.2s:</p>

    <div style="display: flex">

        <div style="flex: 0 0 9%; max-width: 9%;">
            <code style="height: 2rem; font-size: 0.9rem; font-family: monospace; display: block; width: 90%; margin-bottom: 1rem;">js-watch</code>
            <div class="js-watch u-watch--fade-up" style="width: 90%">
                <div style="background: black; padding-bottom: 100%;"></div>
            </div>
        </div>

        <div style="flex: 0 0 9%; max-width: 9%;">
            <code style="height: 2rem; font-size: 0.9rem; font-family: monospace; display: block; width: 90%; margin-bottom: 1rem;">js-watch u-watch--delay-1</code>
            <div class="js-watch u-watch--fade-up u-watch--delay-1" style="width: 90%">
                <div style="background: black; padding-bottom: 100%;"></div>
            </div>
        </div>

        <div style="flex: 0 0 9%; max-width: 9%;">
            <code style="height: 2rem; font-size: 0.9rem; font-family: monospace; display: block; width: 90%; margin-bottom: 1rem;">js-watch u-watch--delay-2</code>
            <div class="js-watch u-watch--fade-up u-watch--delay-2" style="width: 90%">
                <div style="background: black; padding-bottom: 100%;"></div>
            </div>
        </div>

        <div style="flex: 0 0 9%; max-width: 9%;">
            <code style="height: 2rem; font-size: 0.9rem; font-family: monospace; display: block; width: 90%; margin-bottom: 1rem;">js-watch u-watch--delay-3</code>
            <div class="js-watch u-watch--fade-up u-watch--delay-3" style="width: 90%">
                <div style="background: black; padding-bottom: 100%;"></div>
            </div>
        </div>

        <div style="flex: 0 0 9%; max-width: 9%;">
            <code style="height: 2rem; font-size: 0.9rem; font-family: monospace; display: block; width: 90%; margin-bottom: 1rem;">js-watch u-watch--delay-4</code>
            <div class="js-watch u-watch--fade-up u-watch--delay-4" style="width: 90%">
                <div style="background: black; padding-bottom: 100%;"></div>
            </div>
        </div>

        <div style="flex: 0 0 9%; max-width: 9%;">
            <code style="height: 2rem; font-size: 0.9rem; font-family: monospace; display: block; width: 90%; margin-bottom: 1rem;">js-watch u-watch--delay-5</code>
            <div class="js-watch u-watch--fade-up u-watch--delay-5" style="width: 90%">
                <div style="background: black; padding-bottom: 100%;"></div>
            </div>
        </div>

        <div style="flex: 0 0 9%; max-width: 9%;">
            <code style="height: 2rem; font-size: 0.9rem; font-family: monospace; display: block; width: 90%; margin-bottom: 1rem;">js-watch u-watch--delay-6</code>
            <div class="js-watch u-watch--fade-up u-watch--delay-6" style="width: 90%">
                <div style="background: black; padding-bottom: 100%;"></div>
            </div>
        </div>

        <div style="flex: 0 0 9%; max-width: 9%;">
            <code style="height: 2rem; font-size: 0.9rem; font-family: monospace; display: block; width: 90%; margin-bottom: 1rem;">js-watch u-watch--delay-7</code>
            <div class="js-watch u-watch--fade-up u-watch--delay-7" style="width: 90%">
                <div style="background: black; padding-bottom: 100%;"></div>
            </div>
        </div>

        <div style="flex: 0 0 9%; max-width: 9%;">
            <code style="height: 2rem; font-size: 0.9rem; font-family: monospace; display: block; width: 90%; margin-bottom: 1rem;">js-watch u-watch--delay-8</code>
            <div class="js-watch u-watch--fade-up u-watch--delay-8" style="width: 90%">
                <div style="background: black; padding-bottom: 100%;"></div>
            </div>
        </div>

        <div style="flex: 0 0 9%; max-width: 9%;">
            <code style="height: 2rem; font-size: 0.9rem; font-family: monospace; display: block; width: 90%; margin-bottom: 1rem;">js-watch u-watch--delay-9</code>
            <div class="js-watch u-watch--fade-up u-watch--delay-9" style="width: 90%">
                <div style="background: black; padding-bottom: 100%;"></div>
            </div>
        </div>

        <div style="flex: 0 0 9%; max-width: 9%;">
            <code style="height: 2rem; font-size: 0.9rem; font-family: monospace; display: block; width: 90%; margin-bottom: 1rem;">js-watch u-watch--delay-10</code>
            <div class="js-watch u-watch--fade-up u-watch--delay-10" style="width: 90%">
                <div style="background: black; padding-bottom: 100%;"></div>
            </div>
        </div>

    </div>
</div>