Scrollsequence

You are working with Beta version. Use with caution. Backup your work before updating.

Getting Started is easy as one two three!

Tutorial Video:

Create a new page:

Click on (1) Add New Scrollsequence, set a (2) title name and (3) add page.

Select images:

Click on (4) Select Images (5) confirm selection that you want to use. Hold down CTRL or SHIFT for multiple selection.
Take care about the order you select your images. After you made and confirmed your selection, you can easily drag and drop to reorder.

Animate:

Click on (6) Add Animation.The most basic is In/Out Animation.
Three basic parameters are required for each animated element. You can add more element animations with the little plus sign.

Selector example use:

Selector	Description
#my-id	Select a HTML element with id="my-id". Id's should be unique. This means that only one HTML element can have the same id.
.my-class	Select each HTML element with class="my-class". Multiple elements can have same class attribute.

Start and End example use:

StartEnd	Description
015	Element is visible when page is loaded. Once user starts scrolling down, element is hidden once user reaches the fiteenth image.
530	Element is hidden when page is loaded. Once user starts scrolling down, element is displayed from 5th to 30th image in the sequence.

Tips and Tricks

Settings

Show tips

Image optimisation (coming soon)

Image sizing for desktop/mobile (coming soon)

Custom CSS (coming soon)

Custom Javascript (coming soon)

Preloading options (coming soon)

Animation settings (coming soon)

Debug console

Basic Use:	Add another page to the sequence. Each page contains image sequence, content and setting like duration, alignment and scale. Pages can be re-ordered by drag and drop. If you wish you can make a copy of a similar page. Add "Classic content" after the sequence. This section will allow you to add information after the animated sequence. Change background. As a default the content has transparent background. You can pick your own background color if required.
Advanced Use:	Custom CSS is a great way how to add a magic touch to your design. Simply write or paste CSS code. Read our documentation, learn the basics, have a look at some examples and get inspiration for your project. Debug mode gives you information when you fall into trouble. If you stumble upon an issue, don't hesitate and contact us.

Basic Use:

Add another page to the sequence. Each page contains image sequence, content and setting like duration, alignment and scale. Pages can be re-ordered by drag and drop. If you wish you can make a copy of a similar page.
Add "Classic content" after the sequence. This section will allow you to add information after the animated sequence.
Change background. As a default the content has transparent background. You can pick your own background color if required.

Advanced Use:

Custom CSS is a great way how to add a magic touch to your design. Simply write or paste CSS code.
Read our documentation, learn the basics, have a look at some examples and get inspiration for your project.
Debug mode gives you information when you fall into trouble. If you stumble upon an issue, don't hesitate and contact us.