GSAP Process Flow (Divi)

Stages joined by lines that draw themselves; a dot travels along each line and each stage lights up as it arrives. Each demo is labelled with its settings. Resize the window to see the layout switch.

Scroll ↓

1. Defaults — scrubbed by the scroll

Play: with the scroll · smoothing 0.6 · solid line · travelling dot · side by side, stacked on phones · four stages with Font Awesome icons.

Scroll ↓

2. Once in view — curved, dashed, carded

Play: once, when scrolled into view · duration 3 s · Curved and dashed · width 2 px · active #059669 · dot 8 px · circle 80 px, icon 30 px · Card: white, padding 18 px, 1 px #e2e8f0 border, radius 12 px · lit border #059669 · lit title #047857 · stage 2 links to #contact.

Scroll ↓

3. Loop, stacked everywhere, on a dark section

Play: loop while on screen · duration 6 s · Layout stacked on every device · gap 40 px · dashed · track rgba(255,255,255,0.18) · active #f59e0b · waiting opacity 0.3 · title tag H4 · title and text white.

Scroll ↓

4. Step through on a timer · two per row (snake) · numbers 01 · pulse · done colours · packets

Play: Step through on a timer, 2.5 s per stage · Layout: Two per row on desktops and tablets (phones stack) · Show in the circle: the stage number, 01 · Pulse the current stage · lit circle #7c3aed, done circle #ddd6fe with #5b21b6 numbers · Packets: 3 per line, #a78bfa · Curved · gap 56 px.

Scroll ↓

5. Click a stage · wavy flowing line · start at stage 2 · circle border

Play: When a stage is clicked (or Tab + Enter), starting at stage 2 · Drawing speed 0.6 · Wavy, Line motion: Flowing · no travelling dot · Circle border 2 px, waiting #cbd5e1, lit #0ea5e9 · active #0ea5e9 · waiting circle white.

Scroll ↓

6. Point at a stage · stacked with icons on the right · swaying dashed curve · packets

Play: When a stage is pointed at · Layout: Stacked on every device, icons on the right · Curved and dashed, Line motion: Swaying · Packets: 2 per line · active #e11d48.

Scroll ↓

7. Scrubbed and pinned (whole section) · wavy and dashed, flowing · done colours

Play: With the scroll · Pin while drawing: the whole section, at 15 % from the top, for 150 % of the screen height · Wavy and dashed, Flowing · active #16a34a · done circle #bbf7d0 with #166534 icon.

Scroll ↓

8. Once, starting at 50 % · minimum height 60vh · numbers · animates even with reduced motion

Play: Once, when the top reaches 50 % of the screen, 3 s · Minimum Height 60vh · Show in the circle: the stage number · Reduced Motion: Animate anyway · Dashed.

Scroll ↓

9. Scrubbed with custom start and finish (top at 90 %, bottom at 60 %)

Play: With the scroll, starting when the top reaches 90 % and finishing when the bottom reaches 60 % — drawn early.

The end