This is a guide for Semplice 4. If you are using Semplice 5, please refer to this guide to create animations.

In order to make your content fixed/sticky on a scroll, you can use "Motions" and a bit of custom CSS. In this article, you will learn how to do it.​

Step 1. Enable "Motions"

First of all, you will need to enable "Motions" under "Customize" > "Advanced" > "Unlock Editor Motions Options":

Don't forget to "Save" your changes.

Step 2. Create and style your layout.

Drag and drop modules that you would like to make sticky under each other so they stay in one column, then style your layout:

Step 3. Add column sticky effect

In the page editor, click on any element inside of the column to open the settings. Navigate to "Column" settings find the "Miscellaneous" option and add the "sticky-column" class name inside of the field:

After the class name was added switch from "Styling" to "Motions" in the column settings. Set "Event" to "On Scroll", "Start Point" to "Top", "Duration" to "100" (you will need to change this value depending on the fixed column height), "Movement" to "Sticky". Then turn on the "Move" option and set x and y-axis to be 0:

Step 4. Add custom CSS

In the page editor, click "Look & Feel" > "Edit Custom CSS" and add the following CSS:

.sticky-column {
  margin: 0 !important;
  flex-basis: 100% !important;
  max-width: 100% !important;
}

Then "Save" and "Publish" your changes.

Final result

Hit the "Preview" button to see the final result.