SectionFlow.
72+ scroll-driven section transitions

SectionFlow.

Scroll-driven section transitions with persistent layers, viewing phases, and 60 FPS effects. Framer Motion first.

Browse Transitions
Wave RevealCircular PortalSpotlight RevealInk SpreadDynamic Mask RevealGradient BurnLiquid MorphMesh Gradient MorphGlass DistortionRipple RevealSVG Shape MorphVertical SplitCurtain SplitDiagonal SplitBlinds RevealDot Matrix RevealShatter TransitionPaper TearCrystal ShatterThunder CrackPanel PassPerspective FlipFold RevealCard StackCinematic ZoomLayered Depth ShiftInfinite TunnelSpatial WarpHero MorphDynamic PortalCamera FlythroughNeon CorridorStarfield WarpZoom ScrollElastic CurtainParallax Section ShiftSection Pin RevealScroll WarpProgressive MorphDirection-Based RevealMulti-Layer ScrollMagnetic PullParticle ExplosionParticle AssemblyParticle DissolveOrbiting Particle RevealDust SimulationThanos SnapEnergy BurstFloating Particle FlowInteractive ParticlesCloth Simulation RevealLens DistortionPrism RefractionVolumetric Light RevealPixel MeltPage BurnAurora DriftHolographic GlitchMolten PourBlack HoleWave RevealCircular PortalSpotlight RevealInk SpreadDynamic Mask RevealGradient BurnLiquid MorphMesh Gradient MorphGlass DistortionRipple RevealSVG Shape MorphVertical SplitCurtain SplitDiagonal SplitBlinds RevealDot Matrix RevealShatter TransitionPaper TearCrystal ShatterThunder CrackPanel PassPerspective FlipFold RevealCard StackCinematic ZoomLayered Depth ShiftInfinite TunnelSpatial WarpHero MorphDynamic PortalCamera FlythroughNeon CorridorStarfield WarpZoom ScrollElastic CurtainParallax Section ShiftSection Pin RevealScroll WarpProgressive MorphDirection-Based RevealMulti-Layer ScrollMagnetic PullParticle ExplosionParticle AssemblyParticle DissolveOrbiting Particle RevealDust SimulationThanos SnapEnergy BurstFloating Particle FlowInteractive ParticlesCloth Simulation RevealLens DistortionPrism RefractionVolumetric Light RevealPixel MeltPage BurnAurora DriftHolographic GlitchMolten PourBlack Hole
Why SectionFlow

Built like the sites you admire.

60 FPS

Only compositor-friendly properties: transforms, opacity, clip-paths and masks. Per-frame work stays on the GPU.

Persistent layers

Sections mount once as persistent layers. Transitions animate handles — never clone or re-render content.

Viewing phase

Every transition reserves a reading window where sections sit fully static, so animation never competes with readability.

Instant project setup

A single CLI command installs, configures, and integrates SectionFlow into your project in seconds.

Production ready

TypeScript, SSR compatible, mobile optimized, and tuned spring physics.

Velocity-reactive

Effects that respond to how fast you scroll, with per-transition timing overrides.

Animation architecture

Framer Motion first.
Built for continuity.

Built on springs, motion values, and a persistent-layer architecture. Multi-phase staggered choreography delivers smooth, high-performance transitions with precise control from start to finish.

72+
transitions in the catalog
60
frames per second, always
8
categories
1
click to setup

Ship transitions worth scrolling for.

Browse all templates Get started

SectionFlow · MIT · Built with Framer Motion

Ship transitions worth scrolling for.

Browse all templates Get started

SectionFlow · MIT · Built with Framer Motion

“The space between sections is where a website earns its polish.”

Ship transitions worth scrolling for.

Browse all templates Get started

SectionFlow · MIT · Built with Framer Motion