Scroll-Driven 3D Gyroscope in CSS
Scroll-driven tri-gyro by Adam Argyle on CodePen
Open on CodePen ↗Adam Argyle's gyroscope spins at different angles and changes size as you scroll the page. Small coloured triangles at the top help you keep track of each one.
It is all CSS with clean HTML, which makes it a good one to learn from.
3Dscroll-drivenanimation-timeline@property
The modern.css newsletter
New CSS each month, and new things in the Atlas. 806 subscribers. Past issues
More like this
See all →- scroll-driven
by Cyd StumpelGekke zoom dingen
Scroll to zoom deep through layers, parallax with a twistscroll-drivenanimation-timelinezoomscale - scroll-driven
by Chris BolsonCircular typographic scramble
Scroll and scattered letters snap into a circular sentencescroll-driven3Danimation-timelinesibling-index() - 3D
by Ben Evans3D room
A furnished room in 3D, made only with HTML and CSS3Dartperspectivetransform-style