Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Jose Tamu
July 16, 2024 /  Beginner

Spinner

Settings controls

Type: there are 8 spinners to choose from. Going from Type–a to Type–h
Path animation: if enabled, spinner’s stroke path will be drawn, being able to set it’s duration and stagger (delay between strokes).

ScrollTrigger controls

Spinner animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.
Trigger: the element that will fire the animation on scroll. Use the keyword “this” to use the element itself as the trigger.
Start: determines the position of the Trigger to fire the animation. “top bottom” means when the top of the element hits the bottom of the viewport.

Rotation Animation controls

Duration
Delay
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

-Tamu

On this page