MacOS Toolbar Effect

A fluid scroll-driven choreography powered by GSAP ScrollTrigger and precise timeline orchestration. Elements glide with linear interpolation and staggered intervals, creating natural parallax depth that tracks your page movement rather than feeling rigid, while maintaining a locked 60fps across modern screens.

MacOS Toolbar Effect

CategoryHover

TagGSAP, MacOS, Dock, Hover, Menu, Navigation

Guide: How to UseView Guide

API References

Prop	Type	Default
images	Array of icon image URLs populated within the dock toolbar	DEFAULT_IMAGES (16 items)
minSize	Base resting dimensions of each dock icon in pixels	100
maxSize	Maximum magnified dimensions of an icon on direct cursor hover in pixels	200
maskColor	Background mask and border color of the rounded dock container	#000000
onItemClick	Callback function triggered when a user clicks an icon item	--
width / height	Bounding container dimensions of the toolbar	750 / 210