In this section we’ve added a horizontal scroll to tell an outer space exploration story with extra dimension.
This is how to do it on Studio—feel free to build along.
Okay. Starting with a new section…
…we’ll go over to the Inspector panel to apply CSS grid.
We want 3 rows—so add 2 more.
And we’ll set all three to 100 viewport height…(slight pause)
…so that each row is the full height of the screen.
Now we’re all set to add elements—starting with a container from the Add panel. That’ll go in the first row.
I want it docked to the top left, so I’ll just change these margins to zero.
And we want to change the size. So, toggle on advanced sizing…and set it to 200 viewport width and 100 viewport height.
So, with the container at 200vw, half of it’s overflowing out of the viewport.
That’s intentional. But we also need to be able to see what we’re designing. So I’ll select my page, and come over here to change the overflow to Show.
And I’ll make sure the section overflow is set to Show as well. Now we can see what we’re doing.
From here you can design the container however you want. To save some time, I’ve already designed one with all of my elements—so I’ll go ahead and grab it from my assets.
I’ll make sure it’s the right size…so this should be 100vh.
…and let’s double-check the docking here…so left and top margins at zero.
Cool. For the container, use whatever layout works for your design. In mine I’ve got a 2-column grid. I’ll make sure the sizing is right…each column should be 100vw.
Great. The design looks good here. Let’s do a quick check on other breakpoints.
Bit of an adjustment here. [pause] That’s better.
We’ll also check that the container has the same properties at each breakpoint. I’ve got my grid…sizing looks good.
Now on mobile…(slight pause)
Again, we need a total width of 200vw. So I’ll readjust these columns.
Alright. Looking good on all breakpoints.
Now we can start adding animation.
First thing, I’ll go down to the second row, add a container. Stretch it…
…and give it a right margin of 95%.
It’s not supposed to be beautiful—it’s our trigger element for the animation we’re about to set up. I’ll actually rename it: Trigger.
I’ll also rename the designed container to “Horizontal container”...
…to help tell them apart.
Next, we’ll set the horizontal container so it’s sticky
So it’ll stick to the top of the viewport until you scroll to the bottom of this section.
Alright, we’re ready to add the animation. So select the “Trigger” container, and we’ll add a scroll animation.
And the element we want to animate is the “Horizontal container”.
We’ll change the animation path to From its design—so it moves from its original position.
Pick the Move animation. And let’s adjust it.
Make the angle to 270 degrees, so it’s left to right.
And we want a distance of 100vw, because that’s how far this design extends off the screen.
We’ll have the animation area go from zero to 100.
And what this means is that the animation will continue from the moment this trigger element enters the viewport up until it leaves the top of the screen.
We’ll preview it to see it in action. So thanks to the stickiness we added, all we’re seeing is the container moving left to right. Looks good.
I’ll go back for some final touches. We don’t want to forget to get rid of all this white space—which is happening because we still have the page set to show overflow content.
We’ll select the page again, and now go back and hide that overflow content.
And one last thing to really dial up this effect and give it some depth—I’m going to make my spaceship move with the scroll. You can do the same thing to whatever element you’d like in your design.
Like before, we’ll set it to move From it’s design and we want the “Move” effect.
Set the angle, something like this. I’m gonna set the distance to 80vw so it moves a bit slower than the background, almost like a parallax effect.
And we’ll go zero to 100 again.
Cool—let’s see it all together. [pause] That looks great. We’ve also got it set up so it works well on smaller screens.
And that’s it, a horizontal scroll and moving element in Studio.
Thanks for watching. Check out more of these tutorials in the Wix Studio Academy.
