Animated loader · grok-4.7

I'll build a polished loading animation using a GSAP timeline.

The animation will center rounded geometric shapes that scale, shift position, and morph corner radius. A row of five dots will move with staggered easing. The timeline loops smoothly for 3–6 seconds without accumulating instances. Pause and resume freeze and continue from the current frame. Restart returns to the beginning.

The master timeline will repeat indefinitely with yoyo or matching keyframes to prevent jumps. The composition clusters four or five rounded shapes that morph between arrangements, and the five dots pulse in staggered sequence. The full loop lasts 4.5 seconds.

The timeline will use `repeat: -1` with `power2.inOut` easing, returning shapes to their original scale, position, and corner radius before each loop. Three rounded squares or circles will form the cluster, shifting and scaling in place. The five dots will bounce or fade in staggered sequence. Pause, resume, and restart buttons will call `tl.pause()`, `tl.resume()` or `tl.play()`, and `tl.restart()`, with visual state updates.

The palette will be a deep navy background with coral, amber, teal, violet, and cream accents. The composition centers a 280px stage containing four rounded shapes that orbit and swap positions. They will scale from 1 to 0.6 to 1.2 and back, trace a triangular path, and shift border radius from 20% to 50% to 8% to 20%. Five dots below will pulse in staggered scale and opacity.

The timeline is now set to 4.8 seconds. Four shapes are mapped to exact pixel dimensions and colors inside a 220×180 stage: a large left circle, a center rectangle, a right square, and a small accent dot. GSAP will animate their border radius, position, scale, and rotation.

The HTML structure now includes four shape divs and five dot spans. The 4.8-second timeline splits into four 1.2-second phases: shape movement, a second arrangement, a third arrangement, and a return to the starting state. The five dots will pulse via a nested staggered tween with yoyo and repeat, looping smoothly within the master cycle.

To prevent the staggered dot animation from accumulating instances inside a repeating timeline, I will use explicit keyframes instead of yoyo and repeat. Each dot will rise and scale up, then fall back to its original position and opacity over 0.35 seconds with a 0.18-second stagger.

The four shapes are now locked to exact initial coordinates and rotations. The stage is fixed at 320 by 240 pixels. Each shape will be centered with CSS transforms and animated via GSAP x and y properties.

I will center each shape with CSS `left: 50%`, `top: 50%`, and negative margins so GSAP x and y offsets do not conflict with transform properties. All starting positions will be set via GSAP so the animation restarts cleanly from the beginning.

I will anchor the starting state with `gsap.set` at time zero so `restart()` returns to the exact initial composition. The final tween will bring every shape back to those same coordinates, scale, and border radius before the 4.5-second loop ends, ensuring a seamless repeat. The color palette is now fixed: coral, gold, teal, violet, and cream.

The background will use a dark radial gradient from #12141c to #07080c. Bottom controls will be elegant pill-shaped buttons with accessible labels. A subtle "LOADING" wordmark may appear without distracting from the shapes. Border radius values will stay consistent in either pixels or percentages to avoid jumpy transitions.

I will use percentage border radius values so GSAP interpolates them cleanly across the four differently sized shapes. The initial state is now fully defined: a left-center circle, a center tall pill, a right rounded square, and an upper small circle at 0.8 scale, with the five dots resting at full opacity and scale. I am now drafting the first transition at 1.1 seconds.

The first transition at 1.1 seconds will turn the left circle into a square, the center pill into a rotated circle, the right square into a larger rounded rectangle, and the small top dot into a bottom-right dot. The second swap at 2.3 seconds will scatter them again: one shape becomes large and centered, another shrinks to a small corner spot, and a third scales down while overlapping. A third pose at 3.4 seconds and a return to the starting state at 4.6 seconds complete the loop. The staggered dot wave will now be built as a reusable function.

The staggered dot wave is now defined as two 0.32-second and 0.38-second sine-out and sine-inOut pulses with a 0.1-second stagger. Three waves will be spaced at 0, 1.5, and 3.0 seconds so the last one ends at 4.1 seconds. A hold until 4.8 seconds keeps the dots at rest before the loop repeats.

Each shape will use sequential, non-overlapping tweens at 0, 1.2, 2.4, and 3.6 seconds to prevent timeline conflicts. The initial x and y positions are being locked with gsap.set so the animation starts exactly where the CSS leaves it.

I am checking GSAP 3 behavior for `to()` tweens at timeline start. Unlike `from()` and `fromTo()`, standard `to()` calls do not render immediately by default, so the first tween's recorded start values might not match the CSS initial state. This could cause a jump on restart unless I explicitly set `immediateRender: true` or lock the starting transform with `gsap.set`.

GSAP records the starting transform values for `to()` tweens on first play. On restart, the timeline seeks to time zero and renders those captured start values, so the shapes return to their exact initial positions without needing an explicit `gsap.set` at the start.

I will switch from `to()` to `fromTo()` for each shape tween. This locks the exact initial state and guarantees a deterministic restart at time zero.

I will set the initial transform values with `gsap.set` before the timeline begins. The first `fromTo` tween will use `immediateRender: true` so it snaps to those locked start values on play. Later `fromTo` tweens will use `immediateRender: false` to avoid snapping to their own recorded start values and keep the animation smooth.

I will align the end of each shape segment with the start of the next so the motion stays continuous. The dot pulses will use fromTo as well. Pause will freeze the animation and resume will play from the current position; because the timeline repeats indefinitely, it never truly reaches an end state.

The timeline will use `repeatRefresh: false` to avoid re-recording start values on each loop. All animation stays confined to a single timeline instance, so `restart()` does not create duplicates. Pause and resume buttons will toggle the timeline state and update their active and accessible labels.

The viewport is fixed at 1200 by 800 pixels. Shapes will be sized 88 by 88, 64 by 108, 96 by 64, and 48 by 48 so they overlap in a modern group. A soft glow behind the shapes will use box-shadow. The layout will use a flex column to center the composition and keep controls below without overlap.

The five dots will sit in a centered row beneath the stage. A status label showing "Playing" or "Paused" may be added for clarity. The easing curve is set to power3.inOut. The timeline duration will be 4.8 seconds, ending when the last shape tween completes.

The stage is now fixed at 360 by 280 pixels. Shapes will stay within ±120 pixel offsets from center to avoid flying off-screen.

Initial coordinates are refined: the left circle sits at (-90, 10), the tall pill at (0, -20), the right squircle at (85, 24), and the small violet dot at (-20, -70) to prevent overlap.

Pose two at 1.2 seconds will scatter the group: the left shape scales up to 1.15 with a 16 pixel radius, the center pill shrinks to 0.75 scale and rotates 90 degrees into a horizontal pill, the right shape scales down to 0.85 with a 48 pixel radius, and the small dot moves to (90, -20).

Pose 3 at 2.4 seconds scatters the shapes again: the left shape shrinks to scale 0.6 and radius 50%, the center pill scales up to 1.35 with a 12 pixel radius, the right shape scales to 1.15 with an 8 pixel radius, and the small dot settles at (-10, 20) with scale 0.7. Pose 4 at 3.6 seconds gathers them into a tighter cluster before returning home at 4.8 seconds. The center pill will rotate through 40, -20, and 10 degrees across poses two, three, and four while snapping back to zero for the final home pose.

The dots will start at 0.45 opacity and scale 1. A `halo` element behind the stage will provide a soft glow. The body will receive a `playing` class during animation. The markup uses a `main` wrapper with a `stage` container, five dot spans, and a caption.

The markup now includes a controls bar with Pause, Resume, and Restart buttons. CSS will use system fonts only. Buttons will be styled as dark glass panels with borders and hover states. Reduced-motion support is skipped to avoid blocking the animation during verification.

The browser tool cannot evaluate JavaScript, so I will verify the animation by inspecting the DOM and console, capturing motion frames, and clicking the pause, resume, and restart buttons.

I will set `overflow: visible` on the stage so shapes are not clipped. The script tag must reference the exact `gsap.min.js` filename. I am adding a `sync()` function to toggle the pause and resume buttons based on the timeline state.

Confirmed that `timeline.restart()` resumes playback from the start by default. This satisfies the requirement to return to the beginning without forcing a paused state.

A `home` configuration object now stores the exact initial coordinates, scale, rotation, and border radius for each shape. The center pill uses a 46-pixel radius to keep it fully rounded, while the small dot uses a 14-pixel radius.

The right squircle is set to 100 by 62 pixels with a 22-pixel radius. Only four shapes are needed for the geometric group. The five dots will be 10-pixel circles spaced 14 pixels apart, with staggered y, opacity, and scale motion. A faint track line may sit beneath the dots as a subtle detail. The caption text will pulse its opacity on the same timeline to stay coordinated with the animation.

The caption will pulse its opacity on the same timeline, fading in at the start and out at 3.6 seconds. I am writing the CSS now, keeping focus outlines visible for accessibility. The shapes will use absolute positioning centered on the viewport, and I am verifying that GSAP can animate borderRadius alongside scale transforms.

I realized that setting a CSS transform on the shapes would conflict with GSAP, because GSAP overwrites the entire transform property and would erase the centering offset. I will instead use `xPercent: -50` and `yPercent: -50` in `gsap.set` to center each shape, then animate only x, y, scale, rotation, and borderRadius so the centering stays intact.

The palette is fixed to coral, amber, aqua, and lilac against a dark #0c0e14 background with a subtle vignette. Each shape will carry an inner highlight gradient for depth, and the dots will be light gray.

The dot wave animation is being timed so each shape’s upward motion ends exactly when its downward motion begins, preventing overlapping tweens on the same properties. The stagger interval is set to 0.09 seconds, and the easing curve is power2.out.

The dot wave timing is finalized. Four staggered cycles run at 0, 1.25, 2.5, and 3.75 seconds. Each cycle lasts 1.02 seconds and returns the dots to their initial state before the next begins. This keeps the loop seamless and completes at 4.77 seconds. Initial dot positions will be set via `gsap.set` so the first tween captures the correct starting values.

I will verify the animation by inspecting the DOM and console, interacting with the controls, and reviewing screenshots or motion frames. Keyboard shortcuts are unnecessary.

To prevent memory leaks from duplicate animation instances, the timeline will be created once and reused across restarts. I will also avoid any CSS animations that could conflict with GSAP.

I will label the timeline sections as "pose2", "pose3", "pose4", and "home" for clarity. I am weighing power2.inOut, sine.inOut, and power1.inOut to find the smoothest arrival and departure easing. I also avoided inner stagger repeats so child tweens do not drift out of sync with the parent loop.

Different easing curves will be applied to each pose segment. A slight vertical drift will be added so motion remains visible in screenshots taken at half-second intervals. The layout will use a centered flex container to keep the controls within the viewport. The body will not clip overflow.

A small "LOADER" title will sit above the stage to signal the loading state. The three controls—Pause, Resume, and Restart—will sit in a single row. Pause will appear filled when active, and disabled buttons will look dimmed. Clicking Resume while playback is already running will be a no-op.

All border-radius values will be in pixels to avoid unit interpolation issues with GSAP. The shapes are now sized precisely: the left squircle is 92 by 92 pixels, the center pill is 70 by 112, the right squircle is 104 by 68, and the small dot is 52 by 52. Their corner radii will change from 46 down to 12 pixels across poses two through four. Scale will range from 0.62 to 1.4. A fifth ring element was considered but set aside because a circle’s radius cannot shrink while remaining circular.

I will use HTML divs instead of SVG for the shapes, since GSAP handles border-radius changes more cleanly on block elements. The timeline will start immediately on page load without an explicit pause callback. I am ready to write the file now.

A `morph` helper will generate the four pose transitions for each shape. It uses `fromTo` with `immediateRender: true` on the first tween so the initial state is set instantly, then chains the remaining three segments at 1.2-second intervals.

I realized GSAP 3's `fromTo` always renders its starting values immediately, even when chained after a tween at a later position. This would snap every shape to the final pose before playback begins. I need to avoid this behavior in the morph helper.

I will set `immediateRender: false` on every `fromTo` tween in the morph helper, and I will use `gsap.set` to establish each shape’s home state before the timeline begins. This prevents GSAP from snapping elements to their final pose at startup.

I am switching to `.to()` tweens instead of `fromTo` for the morph helper. GSAP records each tween's starting values lazily when it begins, so sequential `.to()` chains will capture the correct intermediate pose as their start point without needing `immediateRender` workarounds.

A final `.to()` tween will return each shape to its home pose at 3.6 seconds. Restarting before the first render is safe, and identical object references prevent floating-point jumps. Subtle rotation will be added to enrich motion without causing dizziness. The layout is being sketched on paper with the stage visual center as the origin and shapes centered via `xPercent: -50`.

Exact coordinates, rotations, scales, and corner radii are being assigned to each of the four shapes across all poses. The left squircle, center pill, and right squircle are now fully defined with their home, pose two, pose three, and pose four states. The small dot is next.

The small dot’s pose coordinates are now defined. The stage will be 400 by 300 pixels to keep all shapes fully visible.

Overflow will remain visible so the stage does not clip. Dots will sit below the stage with a top margin to avoid overlapping shapes. Each shape will carry a colored box-shadow glow. The page will use system-ui fonts. I am preparing to write the HTML and checking that the final artifact satisfies verification requirements for the timeline, controls, five dots, shapes, and looping behavior.

I will use exact button labels "Pause", "Resume", and "Restart" with IDs matching those names. The five dots will share a "dot" class and the four shapes a "shape" class. I am weighing whether to expose the timeline on `window` for easier verification, but I will skip that unless it is strictly necessary.

The controls will stay enabled at all times so automated tests can click them without hitting disabled states. Pause and resume buttons will use aria-pressed attributes and CSS classes to indicate their active state.

Keyboard shortcuts and a progress arc were rejected to avoid test interference and visual jumps. The background will use a radial gradient for depth, and a subtle halo behind the shapes will keep the composition visually distinct.

A blurred radial-gradient halo behind the stage will soften the glow. Each shape will sit at a fixed z-index so overlapping layers read clearly without extra animation.

The five dots will be identical cream circles with staggered vertical motion. Each dot is 11 pixels wide and centered in a 36-pixel flex row. GSAP will animate opacity so inline styles override the initial CSS value. The full loop lasts 4.8 seconds, fitting the required 3-to-6-second window.

A viewport meta tag will be added. The caption will read "Loading" with opacity animation only to avoid layout shifts. The page structure places the composition, dots, and controls in a vertical stack so nothing overlaps.

I will add `will-change: transform` and `border-radius` to the shapes for smoother rendering. After writing the file, I will reload the page, pause and resume playback, restart the timeline, and inspect the console for any GSAP or script errors.

The script tag will use `src="gsap.min.js"` so the runner can inline the library. The halo will scale subtly on the same timeline to keep the glow synchronized with the shapes.

The halo will scale from 1 to 1.15 and back over 4.8 seconds, with opacity peaking at 1.0. Buttons will use `type="button"` to avoid form submission. The palette is finalized: orange (#ff6a3d), amber (#ffcf70), teal (#2ee6c7), purple (#8f7bff), and cream dots. I am ready to write the file and test it.