In View Classes | ANS Pattern Library

In View Animations

Elements with the class js-watch will be observed for entry in the viewport. When they are, the class is-in-view will be added. This can be used to add in-view css changes, however the following utility classes have been created:

Parent class: js-watch u-watch--fade-up

Fade Up

Parent class: js-watch u-watch--fade-blur

Fade Blur

Parent class: js-watch u-watch--img-shrink

Image shrink

Delayed In View Animations

In view animations can be delayed by adding a class of u-watch--delay-[1-10] 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:

js-watch

js-watch u-watch--delay-1

js-watch u-watch--delay-2

js-watch u-watch--delay-3

js-watch u-watch--delay-4

js-watch u-watch--delay-5

js-watch u-watch--delay-6

js-watch u-watch--delay-7

js-watch u-watch--delay-8

js-watch u-watch--delay-9

js-watch u-watch--delay-10