Scrollsequence

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

	For limited time only we offer a trial period of PRO version. No credit card, no risk. Grab yours while they last! 14 DAYS FREE TRIAL

For limited time only we offer a trial period of PRO version.
No credit card, no risk. Grab yours while they last!

14 DAYS FREE TRIAL

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.

Create Page Content:

Standard TinyMCE editor is being used for writing the content. It's the most advanced editor on the market. Supports shortcodes, oEmbed and many other features.
HTML content is made up of elements. Each element can have one unique ID and multiple classes.

Classes and ID's are used as selectors for on scroll animation, details are described in paragraphs below.

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 [scrollsequence] shortcode to control position of the image animation in the content. Margintop, marginbottom shortcode options give you control of the margins. Use negative margin to overlap with classic content before or after the animation. Example [scrollsequence id="####" margintop="-200px"]
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 [scrollsequence] shortcode to control position of the image animation in the content. Margintop, marginbottom shortcode options give you control of the margins. Use negative margin to overlap with classic content before or after the animation. Example [scrollsequence id="####" margintop="-200px"]

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.