I have a very specific set of questions and it seems like the community here is quite helpful so here goes, I apologize in advance if this is me just messing up some really basic stuff.
So I'm trying to create something like this for my creative website:
https://www.figma.com/proto/9dc9BYvt8eMCjpS7QCof54/spxeceship-sketch?node-id=1-4&t=GFOIReHu2zMDdaA4-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1
(quick and scuffed figma sketch)
https://web.archive.org/web/20250203204603/https://pxrsec.hatch.one/expand#expand
(archived version of the full website Im trying to recreate in webstudio)
basically a horizontally scrolling website that displays pretty much the same on every breakpoint.
However, right now I'm using this gsap code for the parallax effect, which i completely vibe coded lmao:
https://codepen.io/pxrsec/pen/emYKpXpI'm not a gsap expert at all, but I can tell there's some weird stuff going on in this code.
Specifically my questions would be:
- Is there a way to address/use images uploaded to webstudio as assets in an HTML embed? I read something about them having dynamic links so getting a direct url might not be the way to go about this, because right now im fetching the images from imgur but I'm guessing it would be better to use the ones in webstudio because of the optimization etc.
- regardless of the previous answer, how can I achieve this on my webstudio project? i tried adding overflow-x: scroll to my gsap code but it adds a second scroll bar which seems super weird. I know I might be messing up something really basic like the display attributes or the position (absolute, relative etc) of some elements or really just something in my code messing up.
Im new to this level of web development so, all help and thoughts are appreciated!
Builder link:
https://p-ef1772b3-91ae-4488-a95a-5cc307f45482.apps.webstudio.is/?authToken=17c828af-7339-432d-84ab-cf5810fd5d1c&mode=design