Smart Business Marketing

Building Strong Brand

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.

Set up the section background

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.

change the background color to Gradient

Under the Design tab in the Inspector Panel,

Set the angle to 135°

Create Stack

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

Set the stack position

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

On the Offset input field set the value to 15%

Add a scroll animation

under Scroll, click on + Add

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

Select the first image

Change the animation path to From its design

Select the Shape animation and click Adjust Animation

Adjust the animation

On the Intensity input field set the value to 0.7

Set the animation area to 40% - 80%

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

WEB

CONTACT

EN / FR

Flawless

Take a Look

Have any questions?

Please don’t hesitate to
contact us via facebook messeger.

Got something to share?

Ping us at info@deboalife.com

Check us out

Meet the Team

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