Basic Sticky Scene
Quick notes
A sticky element needs a top/bottom/left/right value and it only sticks while its parent scene remains in view.
This is the base scene pattern: one sticky subject, plus regular content scrolling past it.
Non-sticky content keeps moving
while the sticky target stays pinned inside this scene.
Quick notes
ScrollTrigger with scrub ties motion to scroll progress, so users can replay the effect in both directions.
Use pinning for scenes when you want stronger control over the layout and timing than CSS sticky can provide.
SVG Draw and Morph
Quick notes
DrawSVG animates stroke paths, not fills, so target path nodes for line-drawing effects.
MorphSVG is great for icon toggles: animate one hidden path into another on interaction.
Parallax
Quick notes
Parallax is usually just layered elements moving different distances on the y-axis over the same scroll range.
A light scrub delay can make layers feel smoother and less robotic.
Take a look at this curved transition!
Next Scene
Quick notes
Timelines help combine multiple animations without conflicts, then one ScrollTrigger can drive the whole sequence.
Label-based snapping is useful for card stacks and chapter-like scroll beats.
Transition Scene
Slide-ins can work really well for transitions between sections. It usually has a different color to make it distinct from the previous content. You can add a border radius to make it a little more interesting and less like a hard cut.
Quick notes
For scroll-driven video, map ScrollTrigger progress to currentTime inside onUpdate.
Waiting for loadedmetadata ensures the duration is known before syncing playback.
Quick notes
In React Three Fiber, Canvas wraps the 3D scene and models are loaded as reusable components.
A common pattern is to play an animation, pause it, then animate clip time with scroll.
Flip Pass 1
First state
Quick notes
FLIP means First, Last, Invert, Play. It makes layout-shift animations and reparenting feel smooth.
Flip.fit is a practical way to map one box into another during a scroll-driven sequence.
Extra Scene
I dont really know what to put here so imma just yap ok cool.
Flip Pass 2
First fit target
Flip Pass 3
Final fit before zoom