Scroll-Reveal
Scales an element as it enters the viewport.
<div class="c-box c-box--border">
<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
Subtle
Makes the effect more subtle.
<div class="c-box c-box--border">
<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--subtle">
<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.
Strong
Makes the effect more strong.
<div class="c-box c-box--border">
<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-reveal--strong">
<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.