Hello!
I recently started creating my first website (home page only so far) and have a few questions. I’ve been learning everything about web design as I go and I’m sure my site is not all organized or done in the best way possible, so please excuse the backend mess when viewing the read-only version (link below).
I’ve been wondering if there was a particular name for this type of single-frame scrolling design and if there are any examples of similar sites someone knows about? I’ve searched but haven’t found anything exactly like what I’m looking for which has made this entire process challenging.
Before I continue with the other pages, are there any major cons to this type of design that I should consider? Any solutions/workarounds? I guess I should have looked into this prior to starting but I’m here now 
I’m happy with the animations as I scroll throughout. However, my main concern is that other users can easily scroll very quickly through the site and miss a lot of the content that was designed to be viewed/scrolled through more slowly (this is especially true when viewing on a phone and swiping up/down).
To solve this, I looked into snap scrolling and figured I could change all of my animations to timed animations once elements are scrolled into view, instead of while scrolling throughout an element as they currently are configured. I wanted to go the fullpage.js route because it prevented the problem of scrolling past elements, unlike the css method where sections are still skipped if scrolled fast. However, when I tried this with the first animation of moving the hero text (“THATER MADE”) out to the left, it worked when scrolling with my mouse, but not when using the arrow keys on my keyboard. (let me know if you need the read-only link to the testing page of this as well)
Is there a way to solve this or is there another method/solution that would work for slowing down the scroll speed throughout the page?
Editing everything is frustrating because it’s all overlapping and I need to hide certain elements to get to the one that I’m editing. I only organized everything like this because I wasn’t sure of another method to achieve this look. Is there a better way to organize the different overlapping divs/sections in the editor to make the editing process easier?
Again, this is my first time creating a website, but I would love any other feedback or tips you can give me. I want the site to be as user-friendly and unique as possible (while still staying in my realm of achievability haha).
Here is my site Read-Only:
https://preview.webflow.com/preview/thater-made?utm_medium=preview_link&utm_source=dashboard&utm_content=thater-made&preview=50f43878b622d309c6c9706588a0a334&mode=preview
Here is a screen recording of what the site is supposed to look like when scrolled:
https://drive.google.com/file/d/15nfYBMePPTPSSPfXcXxfswikBsfpoKgO/view?usp=sharing
Here is a screen recording of what happens when scrolled with snap scrolling added.
https://drive.google.com/file/d/1Olv_mxi0OWuXB7m8hNlzE8I2qtYGox2I/view?usp=sharing
Note 1: The first time through is when scrolled via the mouse (“THATER MADE” moves out to the left as desired). The second time through is when scrolled via the keyboard (“THATER MADE” fails to move).
Note 2: I labeled the sections and gave them borders to help know where I was at throughout the page.
This is my first time posting so please let me know if there is anything I left out or that I should change in the future.
THANK YOU!!