Atelier UI®

DocsCatalogShader StudioPricingGithub
Docs 1.0.0

tools

  • Browse Catalog
  • Shader Studio
    pro
  • Collage
    new

Documentation

  • How it works
  • License
  • MCP

Page Transition (04)

  • Clip Transition
  • Stripe Transition
  • Pixel Transition
  • Band Transition

Components (36)

  • Orbit Gallery
  • Sphere Gallery
  • Spiral Gallery
  • Glowing Fog
  • Gradient Flow
  • Halftone Glow
  • Scattered Grid
  • Tag Cloud
  • Edge Bounce
  • Fluid Distortion
  • Image Trail
  • Lens Media
  • Liquid Media
  • Magnetic Dot Grid
  • Pixel Media
  • Pixel Trail
  • Dither Cursor
  • Hover Burst
  • Image Bloom
  • Curve Media
  • Infinite Gallery
  • Infinite Parallax
  • Infinite Zoom
  • Pixel Scroll
  • Scattered Scroll
  • Elastic Stick
  • Letter Swarm
  • Magnify Trail
  • Stacking Grid
  • Wavy Scroll
  • Pixelated Text
  • Text Bounce
  • Text Fluid
  • Text Scramble
  • Falling Text
  • Text Roll

Foundation Blocks (07)

  • Smooth Scroll
  • Text Split
  • WebGL Image
  • WebGL Provider
  • WebGL Scene
  • WebGL Text
  • WebGL Video
Atelier UI 1.0.0 ©2026
Star on githubBuy me a coffeellms.txt
  1. Docs
  2. /
  3. Components
  4. /
  5. Elastic Stick

Elastic Stick

Items that bounce and stick to the center while scrolling.

https://atelier-ui.com/elastic-stick
Copy Prompt
stagger-value
0.03
stagger-value
0.03

Unlock component

One license unlocks every pro feature for life, including the ones we haven't built yet.

Get pro access

Already have an account? Sign in


NameTypeDefaultDescription
childrenReactNode—The items to animate.
staggerValuenumber0.03Delay between each item, as a fraction of the scroll.
scrollDistancenumber400How long the animation lasts. 100 equals one viewport of scrolling.
overlapnumber0Shortens the empty space before and after the animation, so the animation starts sooner. 100 equals one viewport of scrolling.

Motion
React animation library.

Smooth Scroll (Atelier)
Smooth scrolling for the whole page.

Star on githubBuy me a coffeellms.txt