Scroll-Scale
Scales an element as it enters the viewport.
<div class="c-box c-box--border u-margin-block-end-sm">
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
</div>
<div class="c-box c-box--border b-scroll-scale">
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
</div>
You may have to resize your browser window to see the effect.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
Modifiers
Range
Sets the animation range.
<div class="c-box c-box--border u-margin-block-end-sm">
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
</div>
<div class="c-box c-box--border b-scroll-scale b-scroll-scale--range-short">
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
</div>
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
<div class="c-box c-box--border u-margin-block-end-sm">
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
</div>
<div class="c-box c-box--border b-scale-reveal b-scale-scale--range-long">
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog.</p>
</div>
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.