Scroll Reveal Kit
Things appear
as you scroll.
One small script, one attribute. No library needed.
↓
data-reveal="..."
Seven ways to enter
Each box below uses a different type.
uprises into place
downdrops into place
leftslides from the right
rightslides from the left
zoomgrows to full size
fliptips up from the floor
blurcomes into focus
data-reveal-stagger="110"
One after another
Put one attribute on the parent. The children follow in order.
1first
2second
3third
4fourth
data-reveal-repeat
Again and again
Scroll away and come back. These play every time.
repeatzoom, every visit
repeatflip, every visit
repeatslide, every visit
Free to use in personal and client projects. Made by Rehmat, animatedcreativity.com