Animated loader · qwen3-8b

Okay, let's tackle this problem step by step. The user wants a looping loading animation using GSAP, with specific elements and controls. First, I need to create an HTML file that includes the provided gsap.min.js. Since they mentioned inlining CSS and JavaScript, I'll make sure all styles and scripts are within the HTML file.

Starting with the structure: the HTML should have a body with a dark background. The main elements are the geometric shapes and the dots. For the shapes, maybe use divs with rounded corners, positioned absolutely to center them. The dots can be another set of divs in a row.

Next, the CSS. The body needs a dark background, maybe #000. The container for the shapes and dots should be centered using flexbox. The shapes can have a light color, like #0ff, and the dots can be white with some margin between them. Transitions for scale, position, and corner radius will be handled by GSAP.

Now, the GSAP timeline. The animation should loop, so I'll use repeat: -1 and yoyo: true. The shapes need to scale and change their corner radius. Maybe apply a tween that scales them from 1 to 1.5 and changes the border-radius. The dots should have staggered opacity changes or movement. Using staggerChildren in the timeline for the dots.

Controls: Pause, Resume, and Restart buttons. These will manipulate the timeline's playhead. The buttons should be positioned at the top, maybe fixed, so they're always visible. Adding event listeners to each button to control the timeline.

Testing the timeline: Need to ensure that the animation flows smoothly, repeats without issues, and the controls work as expected. Also, check that the elements stay centered and the viewport is properly handled.

Wait, the user mentioned a group of rounded geometric shapes. Maybe using SVG elements would be better, but since they said no external assets, using divs with CSS borders and transforms might be easier. Alternatively, inline SVG could work, but divs are simpler for this case.

For the shapes, perhaps create multiple divs with different initial positions and sizes. Apply a timeline that animates their scale, position, and border-radius. The dots can be a series of divs with opacity changes, staggered over time.

Implementing the timeline: Start with the shapes' animation, then the dots. Use a timeline that starts at 0, adds the shape animations, then the dots with a delay. The total duration should be between 3-6 seconds. Let's say 4 seconds for the full cycle.

Controls: The pause button will call .pause() on the timeline, resume calls .resume(), and restart calls .restart(). Need to make sure the timeline is properly referenced in the script.

Also, ensure that the animation doesn't have abrupt jumps when restarting. Using yoyo: true and repeat: -1 should handle the looping smoothly.

Now, putting it all together in the index.html. Include the GSAP script via a local tag. Write the CSS inside a style tag, and the JavaScript inside a script tag. Make sure all elements are properly structured and the timeline is correctly set up.

Testing the code: After writing the HTML, I'll need to verify that the animation runs, the controls work, and the elements are centered. Since I can't run it here, I'll have to rely on the code structure to ensure correctness. Check for any possible overlaps or layout issues, and make sure the GSAP commands are correctly applied.

Okay, let's see. The user wants a looping loading animation using GSAP. I need to make sure the HTML file is correctly structured with inline CSS and JavaScript. The key elements are the geometric shapes and the dots with staggered motion. The controls for pause, resume, and restart are also required.

First, I'll check the HTML structure. The body has a dark background, which is good. The container uses flexbox to center the content. The shapes and dots are positioned absolutely, which should keep them centered. The CSS for the shapes and dots looks okay, but maybe the initial positions could be more dynamic. Oh, wait, the shapes have random x and y offsets in the GSAP animation, which is good for variation.

The GSAP timeline is set up with repeat: -1 and yoyo: true, which should make it loop smoothly. The shape animations scale and change border radius, while the dots have staggered opacity and position changes. The controls are buttons that manipulate the timeline's playhead. That should work for pause, resume, and restart.

Wait, in the JavaScript, the shapes are animated with fromTo, applying scale, borderRadius, x, and y. The dots have a fromTo with opacity and x, staggered. The timeline duration is 2 seconds for the dots, but the total animation might be longer. Let me check the timing. The shapes take 1.5 seconds, and the dots take 2 seconds with a delay of 1.5. So the total duration would be around 3.5 seconds, which fits the 3-6 second requirement.

Testing the controls: Pause should freeze the timeline, resume continues from where it left off, and restart goes back to the beginning. The GSAP methods .pause(), .resume(), and .restart() are correctly called on the timeline.

I should verify that the elements stay centered. The container uses flexbox with justify-content and align-items set to center, and the shapes and dots are positioned absolutely within it. The viewport is handled by setting the container to 100vw and 100vh.

What about the color palette? The shapes are light blue (#0ff) on a dark background, and the dots are white. That contrasts well. The dots have opacity for a subtle effect.

Potential issues: Maybe the shapes' initial positions are too clustered. The random x and y in the animation might not be enough. Alternatively, perhaps the shapes should have different initial positions. But since the user allows free choice in choreography, this should be acceptable.

Another thing: The GSAP script is included via a local tag, as required. No external assets or CDNs are used. The code doesn't have any network requests, so it's sandboxed.

I think this meets all the requirements. Now, the user needs to verify by checking the timeline at several moments, testing pause/resume/restart, and ensuring smooth transitions. The code should handle that.