Fade in
a-fade-in a-on-view
SW Helper Animation
Module-level motion POC
Each block stands in for a module root (the same place Custom Classes would go). Every demo uses a-on-view so nothing plays until you scroll it into view.
750px spacers sit between groups. Type-in and shimmer need a heading (plain text). A few examples pair those headings with a module-level reveal on the wrapper.
Reduced motion is on. Blocks will appear in their finished state with no animation.
Reveals
Same default speed (medium). Compare enter directions side by side.
Fade up
a-fade-up a-on-view
Fade down
a-fade-down a-on-view
Fade left
a-fade-left a-on-view
Fade right
a-fade-right a-on-view
Scale in
a-scale-in a-on-view
Blur in
a-blur-in a-on-view
Speeds
Same motion (a-fade-up). Slow 1.15s · medium 0.7s · fast 0.35s.
Slow
a-fade-up a-on-view a-slow
Medium
a-fade-up a-on-view a-medium
Fast
a-fade-up a-on-view a-fast
Fixed delays
Same fade-up. They start together in view; the delay is the wait before each one moves.
Delay 100
a-fade-up a-on-view a-delay-100
Delay 200
a-fade-up a-on-view a-delay-200
Delay 300
a-fade-up a-on-view a-delay-300
Delay 500
a-fade-up a-on-view a-delay-500
After previous
a-after-previous staggers 0.18s × index among nodes that have this class.
Stagger 1
a-fade-up a-on-view a-after-previous
Stagger 2
a-fade-up a-on-view a-after-previous
Stagger 3
a-fade-up a-on-view a-after-previous
Stagger 4
a-fade-up a-on-view a-after-previous
Accent — pulse
Module-level accent. Left plays once. Right loops with a-repeat.
Pulse once
a-pulse-soft a-on-view
Pulse loop
a-pulse-soft a-on-view a-repeat
Type in
Plain-text headings only. The heading is the label. Do not nest markup inside a type-in heading.
Type in once
Type in fast
Type in slow
Type in loop
Shimmer
Accent on the heading. Once, then looping with a-repeat.
Shimmer once
Shimmer loop
Heading plus module-level
Wrapper = Custom Classes on the module. Heading = that heading’s CSS Class. Type-in and shimmer stay on the heading.
