Basic Use

The best way to start is to have a small number of images that could be taken from a video, exported from a 3D animation software, or you can simply download some samples from us to get you started.

Simply add the images to the sequence. To simplify the animation and HTML element logic, the animation is split into scenes. Good practice is to split longer animations into scenes.

Each scene can have a number of images and HTML elements where you can input your text, forms, images, or even embed a separate video. After you are done with the first scene, proceed to the next one, until you are happy with the image animations and content on each scene.

There is a Classic content, which allows you to enter anything in a classic manner using HTML or Wordpress editor.

How to Video

We have made it easy for you to be creative. No coding required, only if you want to.

Create your scrolling animation website directly from your video or pictures. Export images from your video application or CAD directly to the web and animate content seamlessly.

Overview

You should have some basic understanding of how Wordpress works, and also have some really basic HTML skills to speed up your learning curve. You can watch the getting started video click by click and you should be fine.

Start by clicking on “Add Scene”, then add images and content to your scene. Reorder scenes by drag and drop, or the Sort button. Duplicate or Delete scene using buttons in the bottom right corner.

1. Write Title and Add a New Scene

1. Navigate to Wordpress Admin Dashboard and click on Scrollsequence → Add New Scrollsequence. Follow the steps on the screen.
2. For each new Scrollsequence you need to write a title, otherwise Wordpress would not save your work correctly, so always start with naming your work!
3. Each Scrollsequence can consist of a single scene or multiple scenes. Scenes serve the purpose of simplifying long animations and separating images into groups. Each scene has its own images, content, settings and animations.
4. Note: To add another Scene click on the ”+” symbol on the Scene tab.

It is important to write your title, otherwise your scene cannot be saved!

2. Add Images

Click on (4) Select Images and (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.

If you do not have your own images available, you can use one of our Image Packs
Pack 1 ,
Pack 2 .

• Quantity: 50-100 images is a good starting point.
• Resolution: Image sizing depends on your application and if you want your image to scale to fit or scale to fill. Good practice is to start with something that looks roughly okay, and optimize at the end of the process.
• Aspect ratio: If you plan to use one set for both mobile and desktop websites, it is recommended to use nearly square aspect ratio. In the future there will be an option to have different sets of images according to user screen size.
• Image format and sizing: Image weight is key aspect. You want to make sure that image looks fine, while having a low size. Usually best results are achieved with .jpg or .jpeg images, where a 1920x1080 image can have less than 60kb.
• Scale to fit or fill: Scale to fit makes the image fit inside the screen. Scale to fill stretches the image so it always covers full screen width and height. Make sure to test on both desktop and mobile to make sure that the focus is on the right place.

3. Write Content

Standard TinyMCE editor is being used for writing the content. 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 IDs are used as selectors for on scroll animation, details are described in paragraphs below.

4. Animate (FREE Version)

Scrollsequence uses image number instead of time as in video animation. On every scene images are numbered in sequence. As user scrolls up and down, this number changes accordingly. Every scene starts numbering images from zero.

To animate HTML content first you need to select what you want to animate, then you need to define animation start and finish.

• Selector – Identify what element(s) are you animating
  • #id – Read more about id attribute on W3 Schools 
  • .class – Read more about the class attribute on W3 Schools 
• Start – Animation starting point. Decide when the element that you have selected becomes visible.
• End – Animation ending point. Decide when the element that you have selected is hidden.

Class selector has to start with a ” . ” (dot). ID selector start with a ” # ” (hash key).

Example above selects the id name on-earth and makes it visible for the first ten image frames. Outside of those frames the element will stay hidden.

5. Animate (PRO Plan)

Below the basic building stones for animation are listed. Selector, start and end values are stored in the same place for both Free and PRO version, hence you won’t lose any work if you get your PRO version.

• Selector – Element id or class selector (same as Free version)
• Start – Animation starting point (same as Free version)
• End – Animation ending point (same as Free version)
• From Animation – Connected to the starting point of the animation. Duration is in positive direction from starting point.
• To Animation – Connected to the ending point of the animation. Duration is in negative direction from starting point.

Apart from FadeIn and FadeOut animations, there are few more basic animation types. You can combine two or more and apply them on the same element, its parent, or child elements and vice versa.

• Fade From/To – Opacity is tweened between 1 and 0. Visibility attribute is set to none when opacity hits zero.
• Move Up/Down Vertical – Vertical up and down movement. Units are yPercent: percent-based translateY()
• Move Up/Down Horizontal – Horizontal up and down movement. Units are xPercent: percent-based translateX()
• Scale – Change the scale of animated element.

See paragraph above for details about starting and ending points.

6. Options and Settings

There are two places where to set things up. Options are global and affect all sequences on your installation. Settings can be different for each sequence and are part of the Scrollsequence editor.

a) Options

• Preload Percentage – (Range from 0% to 50%) – Scrollsequence becomes visible and active only after the preload percentage is met. With lower preload percentage the page will load faster but animation may not be smooth, until enough images have finished loading.
• High Definition Canvas – Maximum Image Quality uses window.devicePixelRatio to get the real pixel resolution of the device. Maximum performance uses the screen width without the devicePixelRatio taken into account.
• Position Sticky – (CSS Sticky | Javascript Sticky) – CSS Sticky has the best performance, but it does not work with all Themes, especially with the ones that use overflow:hidden CSS property. Javascript Sticky works with most themes, but there may be a nasty one frame glitch when the position changes from relative to fixed.

b) Settings

• Position – (Sticky (default) | Absolute | Static) – Sticky position fixes the sequence to the screen ensuring it remains visible. After the animation finishes, it moves up with the page. Absolute position is similar, but its taken out of the document flow, you may need to adjust z-index to control if the animation is behind or in front of the content. Static position means that the animation flows with the page as normal content, use Start and End triggers to control animation start and finish.
• Start Trigger – (Sooner | Default) – As default the animation starts when the element is fully in the viewport. You can start sooner, so the animation plays once it becomes only partially visible.
• End Trigger – (Default | Later) – As default the animation ends when the element is fully in the viewport. You can make it finish later, so the animation play while it moves away from the viewport.
• Scroll Delay – (0s - 3.5s) – The scroll delay defines how long it takes for the animation to catch up with the final scroll position. This can be useful to smooth out the sequence.

7. Shortcode – Add Scrollsequence anywhere on your website

Insert animated sequence using shortcode anywhere on your website. See below for shortcode options and use.

• id: (Required) Scrollsequence post ID. You can find it in the custom post list.
• margintop: (Optional) Margin top is the spacing (positive value) or overlap (negative value) of the start of the animation. See w3schools  for reference.
• marginbottom: (Optional) Margin bottom is the spacing (positive value) or overlap (negative value) of the end of the animation. See w3schools  for reference.
• hide: (Optional) Hide is a list of devices for which the sequence is not loaded. Use this if you want to hide or show the scrollsequence only on particular devices.

Format:

• [scrollsequence id="####"] – Basic shortcode format. #### is the post id.
• [scrollsequence id="####" margintop="-200px"] – 200px overlap on the top (start) of the animation
• [scrollsequence id="####" marginbottom="-200px"] – 200px overlap on the bottom (end) of the animation
• [scrollsequence id="####" hide="isMobile"] – Do not load scrollsequence on phones and tablets. Read more.
• [scrollsequence] – Format without the id option can be used in custom post type only. It simply shows the animation associated to the custom post. Does not work anywhere else.

8. Duplicate Scrollsequence

Since version 1.1.8 you can duplicate your Scrollsequence with one click. This can be useful when working with multiple languages, A/B testing or simply when you want to back up your work.

When you click on Duplicate a new draft post will be created with all the information from the original post.