Okay, let's tackle this user request. They want a single-page web app with a looping animated loading sequence using GSAP. The background should be dark, and the animation includes morphing rounded shapes and a staggered row of dots on a GSAP timeline with smooth easing.

First, I need to create an index.html file that includes all the necessary elements. Since they mentioned using gsap.min.js, I'll make sure to include that via a script tag. The user specified not to use external resources or CDNs, so I assume the file is already present in the current directory. 

The structure will have a dark background, maybe a div with a class like 'loader' to contain the animations. For the morphing shapes, perhaps using SVG circles that scale and change radius. The dots can be another set of elements, maybe divs with borders, animated to move in a staggered manner.

I'll need to set up a GSAP timeline. The timeline should loop, so I'll use .repeat(-1) and .yoyo(true). The morphing shapes could have a tween that changes their scale and radius, while the dots animate their positions with a stagger. 

For the CSS, the body should have a dark background, maybe #000. The loader container should be centered. The shapes and dots will have their own styles, like fill colors, sizes, and positioning. 

In the JavaScript, initialize the GSAP timeline. Add the morphing shapes with a tween that scales them and changes their radius. Then, add the dots with a staggered movement. Make sure the timeline loops smoothly with easing functions like 'power2.out'.

Wait, the user mentioned "staggered row of dots". So the dots should be arranged in a row, each moving at different times. Using GSAP's staggerTo method with a duration and delay. Also, the morphing shapes might need to morph between different shapes, but since it's a loading sequence, maybe just scaling and changing radius.

I need to ensure all elements are positioned correctly. Maybe using absolute positioning for the shapes and dots inside a relative container. Testing the timing and easing to make sure the animation is smooth and loops seamlessly.

Putting it all together: HTML structure with the necessary elements, CSS for styling, and JS for GSAP animations. All in one file, no external files. Let me draft the code step by step.

Okay, let me check what the user asked for. They wanted a single-page web app with a looping animated loading sequence using GSAP. The background should be dark, with morphing rounded shapes and a staggered row of dots on a GSAP timeline with smooth easing.

First, I created the index.html file. I included the necessary HTML structure with a dark background. The CSS styles set the body to black and positioned the loader in the center. The shapes and dots are styled with rounded corners and appropriate sizes.

In the JavaScript section, I initialized a GSAP timeline that loops infinitely. For the morphing shapes, I used the to() method to animate scaling and borderRadius. The shapes start at scale 1, expand to scale 2, then contract back. The stagger option adds a delay between each shape's animation.

For the dots, I animated their x-position to create a back-and-forth motion. The staggered amount creates a sequential effect. The easing functions are set to elastic for a smooth, bouncy feel.

I made sure all elements are positioned absolutely within the loader container to ensure they're centered. The GSAP script is included via a local file, as per the user's instruction to avoid external resources.

Testing the code, the animations should loop seamlessly, with the shapes morphing between circles and squares, and the dots moving in a staggered pattern. The dark background provides the desired contrast. Everything is contained in one file, meeting the user's requirements.