Product motion lab
Scroll patterns for real tutoring journeys
Each block maps a NextGen use case — parent booking, subject choice, tutor proof, weekly progress — so motion stays tied to decisions families actually make.
- Subjects search
- Tutor filmstrip
- zoom
- doublescroll
- 4kvideo
- wiper
- dark-veles
- scroll-mask
- onscroll
- swag-card
- transforms
- depth-scroll
- perspective-reveal
- scale-depth
- rotate-x-scroll
- rotate-y-scroll
- translate-z
- stagger-depth
- stack-3d
- cards-fan
- pin-section
- horizontal-scroll
- image-depth
- text-depth
- section-cinematic
- tilt-3d
- horizontal-3d-scroll
- gsapify-text-fade-up-words
- fade-up
- gsapify-text-word-build
- gsapify-text-staggered-letters
- gsapify-card-slide-in-stagger
- gsapify-text-line-by-line
- gsapify-text-slide-left
- gsapify-kinetic-split-lines
- stagger-children
- gsapify-text-blur-in
- magnetic-button
- gsapify-magnetic-button
- gsapify-text-fade-up-words
- gsapify-text-staggered-letters
- gsapify-card-slide-in-stagger
- fade-up
- gsapify-curtain-reveal
Use case: search “Physical Sciences†before opening Find a Tutor
Live catalog
Subject explorer parents actually use
Same searchable grid as production — filter the catalog, then jump into matching tutors.
Activate the NextGen Subjects Widget plugin to render this showcase.
Use case: swipe tutor cards like a marketplace shortlist
Perspective deck
Shortlist tutors and pathways in 3D
Named educators, subject sprints, and booking destinations — drag, swipe, or use arrows.
Activate the NextGen 3D Filmstrip plugin to render this showcase.
Use case: first viewport after Google “math tutor near meâ€
Hero zooms into the brand promise
Motion draws attention to the assessment CTA without hiding copy or contrast.
Use case: two audiences — parents discovering vs tutors advancing
For families
Find a Tutor
Transparent pricing
First-lesson guarantee
Child safety guide
Subject explorer
Parent dashboard
For educators
Become a Tutor
ID + background vetting
Tutor dashboard
Lesson notes & payouts
Onboarding checklist
Support desk
Use case: watch how the first online lesson feels
Story media locks focus while you scroll
Parents get a clear picture of the session format before booking.
Use case: reveal “after tutoring†confidence vs the worried baseline
Progress reveal for report-card anxiety
Use case: prove trust before asking for payment details
Verified tutors. Visible dashboards. Rematch guarantee.
Scroll pacing stacks the reasons a cautious parent keeps reading.
Use case: brand line that should stay readable on light surfaces
NextGen Tutors
progress you can audit
Typography reveals with scroll — ink stays high-contrast on the lab surface.
Use case: subject tiles enter as the learner explores options
Subject moments arrive as you scroll
Use case: peel through onboarding steps while the stage stays sticky
Sticky card stack
Journey cards stack, then peel
Recreated from the Swag sticky-card motion — each step rises into place so parents can follow assessment to first lesson without losing context.
Free assessment
Map gaps against CAPS / IEB outcomes.
Tutor match
Filter by subject, grade, province, format.
Learning plan
Agree weekly goals parents can audit.
Live lessons
Book, attend, review notes, rebook.
Desktop pin + scrub; reduced on tablet; static when prefers-reduced-motion.
Use case: 3D gallery for proof moments before booking
Perspective transforms
Proof tiles swing into flat readability
Framer scroll-transform language — rotateY/X, translateZ, scale — so classroom, tutor, and guarantee imagery feel spatial then settle for reading.
Original transforms.framer.website changed; motion follows Academy scroll-transform patterns with tutoring media.
Use case: explain pricing without burying the rates
Packages stay readable over soft depth
Parallax atmosphere, light wash — copy and rates remain ink-on-wash, never dark-on-dark.
Use case: show the path from assessment to improvement
Learner journey
From free assessment to measurable weekly gains
Panel tilts into place as the section centers — same story parents hear on the homepage.
Use case: primary conversion — book free assessment
Book a free assessment this week
Use case: micro-delight on a pricing or plan card
Flat monthly packages tilt into view
Keep plan names and hourly figures fully visible while the card rotates on X.
Use case: flip attention between learner and parent views
Student plan ↔ parent report
Y-axis motion suggests two linked dashboards without hiding either label.
Use case: pull a key guarantee line toward the reader
Love the first lesson — or rematch
Z-depth emphasizes the risk-reversal promise without reducing contrast.
Use case: calm a worried parent with staged proof
Trusted learning ecosystem
Stories parents recognise from their own week
Thandi books Grade 10 Maths help
Parent in Gauteng picks CAPS Maths, online evenings, and gets three vetted matches in under 48 hours.
Sipho’s first lesson guarantee
If the chemistry fit is wrong, rematch or refund — proof sits on the tutor card before payment.
Parent dashboard after week 3
Session notes, homework completion at 76%, and the next booking slot appear in one place.
Use case: onboarding checklist stacked in depth
Free assessment
Map gaps against CAPS / IEB outcomes.
Tutor match
Filter by subject, grade, province, format.
Learning plan
Agree weekly goals parents can audit.
Live lessons
Book, attend, review notes, rebook.
Use case: pick a learning lane before booking
Mathematics
Exam sprints & homework loops
Sciences
Labs, formulas, paper practice
Languages
Reading, writing, orals
Teach with us
Apply, get vetted, go live
Use case: keep “Get help†visible while options scroll by
Pinned help while you compare subjects
The CTA stays in view so a parent never loses the next step.
Use case: week-by-week timeline after the first booking
Week 0 · Assessment
Baseline gaps captured
Week 1 · Match
Vetted tutor confirmed
Week 2 · Plan
Goals parents can audit
Week 3 · Lessons
Notes + homework loop
Week 4 · Report
Progress shared Friday
Use case: recruit tutors without burying the apply CTA
Educators see themselves in the frame
Use case: subject change updates the plan in front of the parent
Pick Physical Sciences — the plan adapts in place
Use case: cinematic beat before the booking modal
See how a NextGen session actually runs
Transition softens the cut into video or modal without lowering text contrast.
Use case: hover proof cards before committing
Thandi books Grade 10 Maths help
Parent in Gauteng picks CAPS Maths, online evenings, and gets three vetted matches in under 48 hours.
Sipho’s first lesson guarantee
If the chemistry fit is wrong, rematch or refund — proof sits on the tutor card before payment.
Parent dashboard after week 3
Session notes, homework completion at 76%, and the next booking slot appear in one place.
Use case: walk a parent through the five-week journey without a single extra click
Horizontal 3D scroll
The journey scrolls sideways, in 3D, while the page scrolls down
GSAP + ScrollTrigger pin this section and drive the track; Lenis (when enabled in Settings) smooths the momentum; each panel gets its own scroll progress for CSS 3D depth and a live, scroll-reactive Three.js object.
Week 0 · Assessment
Baseline gaps mapped against CAPS / IEB outcomes.
Week 1 · Tutor match
Vetted educator confirmed within 48 hours.
Week 2 · Weekly plan
Goals a parent can audit every Friday.
Week 3 · Live lessons
Notes and homework loop stay in one dashboard.
Week 4 · Progress report
Love the fit, or rematch under the guarantee.
Desktop: pinned, scrubbed, live 3D models per panel. Tablet: scrubbed, models off. Mobile / reduced motion: the same five panels as a native swipeable strip — nothing is ever hidden.
