Scroll Float | Aphelion Orbit
Strata Sneakers
Scroll Float animation#13 of 32WebHow this animation works
Animations example for Web: floating product cutout that travels the page on scroll.
Trigger: page scroll — overall progress is interpolated along a list of keyframed waypoints.
Motion: a fixed-position transparent PNG floats above all content and glides between waypoints, its x/y position, rotation (multiple full spins) and scale lerped continuously, so the object tumbles from section to section while the page scrolls normally beneath it; reversing scroll retraces the path.
Structure: fixed image layer + waypoint array + rAF-throttled scroll-progress interpolation. Best for: single-product pages where one hero object should tour the entire layout.
