Join the Webstudio community

Updated 2 months ago

Horizontal scrolling basics

At a glance
The community member is trying to create a horizontally scrolling website with a parallax effect, similar to a Figma prototype and an archived website. They are using GSAP code for the parallax effect, but are facing some issues. The main questions are:

1. How to use images uploaded to WebStudio as assets in an HTML embed, as the links to these images may be dynamic.

2. How to achieve the desired layout and scrolling behavior on the WebStudio project, as adding overflow-x: scroll to the GSAP code results in a second scroll bar.

The community members have provided some suggestions, such as rendering the image component on a canvas and using a JavaScript selector to get the URL, as well as simplifying the nested containers and position settings.

Useful resources
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/emYKpXp
I'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:
  1. 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.
  1. 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
P
O
4 comments
bumping this for any help or pointers
  1. yes, render image component on canvas, write a javascript selector to find that element, get the url from it
you have a lot of nested containers with all sorts of position absolute and overflow settings
try to stick with a single one container where you set these
Add a reply
Sign up and join the conversation on Discord