top of page

Wix Studio Sandbox

Recreate this section with sticky & scroll animation

5 mins

Watch tutorial

Click preview to watch tutorial and to see your progress

Use our Sandboxes to experiment with tools and features from the Studio Editor and get a sense of what’s possible with the platform. 

 

Follow the steps in this Sandbox to recreate a section with reveal effect.

To see the instructions, switch to desktop.

Preview to see how this design looks on mobile

1

Set up the section background

a.

You can edit the section from the Inspector Panel to the right

Scroll down to the section below this one and click to select it.

b.

change the background color to Gradient

Under the Design tab in the Inspector Panel,

c.

Set the angle to 135°

2

Create Stack

a.

Select both text elements. On the floating menu that appears in the workspace click Stack

3

Set the stack position

a.

Once the stack is selected, scroll down on the Inspector Panel, under Position, click on the Position type dropdown and select Sticky

b.

On the Offset input field set the value to 15%

4

Add a scroll animation

a.

under Scroll, click on + Add

From the top of the Inspector Panel, open the Interactions tab,

Select the first image

b.

Change the animation path to From its design

c.

Select the Shape animation and click Adjust Animation

5

Adjust the animation

a.

On the Intensity input field set the value to 0.7

b.

Set the animation area to 40% - 80%

c.

Repeat the same instructions to add the scroll animation to the rest of the images

Great, you’re all set. Preview to see how the effect turned out

Your creation

&ART

CREATIVE

The final design

Let’s Work Together

ABOUT US

BRANDING

3D

WEB

CONTACT

SEARCH

EN / FR

&ART

CREATIVE

Start Now

Help your content make a bold entrance. Learn to add a reveal animation and have precise control over how and when the effect kicks in.

Recreate a section with reveal effect

Start Now

Learn a quicker and more intuitive way to create a section layout with presets, adjustable cell designs and animations.

Recreate this section with grid

Start Now

Discover a fresh way to move, reveal and transform your site content to engage visitors and keep them scrolling.

Recreate a section with scroll animation

Get proficient at using the Studio Editor and find other skill-sharpening resources in the Wix Studio Academy.
Be sure to click “preview” before starting a new Sandbox.

Try out more Sandboxes 

bottom of page