Scrollsequence allows you to create on scroll full page image animations that are controlled with mousewheel or touch. We have made it easy for you to deliver a powerful message. Images are loaded in the background and as you scroll through the webpage they play and rewind as you scroll up and down.
Introduction 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 seamlesly.
Easy integration
Available for free from download page or from Wordpress Plugin depository. Install and activate like any other plugin.
Info: It's recommended to download directly from our servers for the latest version.
How to get Scrollsequence?
There are two versions of Wordpress plugins available. Free which will suit if you want something really simple, but still pretty stunning. Pro version is a full package that provides you with a lot of features. We offer 14 days free trial with PRO version. No credit card is required, just enter your email and you will receive the license for 14 days free of charge. If you prefer having your website made by us, contact us and we can build it for you.
Scrollsequence PRO & Business - Get your copy from Download section
Features
Free:
Fully responsive: Mobile first responsive design.
SEO friendly: Most search engines crawl without executing Javascript. That's no problem. All content is visible even without it so your page can be indexed like any other.
Image scaling: You can select scale of your image for every scene of the sequence.
Image preloading: Images are pre-loaded in the background.
Array customization: Want to display a certain image longer? Loop, reverse or bounce-back images? All done in few clicks.
Limited images For performance reasons, there is a limit on number of images animated.
Limited shortcode support You can insert Scrollsequence anywhere on page, but are limited to one sequence per page.
PRO:
Advanced animation: Animate HTML content using our animation presets.
Scroll Delay: To smoothen the animation, you can add a scroll delay parameter.
Animate any element: Our GSAP powered animation engine allows you to animate any elements on page. Make your sidebar, main menu, or anything else animate on scroll.
Advanced preloading and caching: Images are loaded and decoded according to user interaction.
Priority email support: Got stuck with a problem? We will help you get back on track.
Custom CSS: Allows you to add your own styles and functionality. Possibilities are endless.
Unlimited images: Add as many images you want, thanks to GSAP animation engine things will run butter smooth.
Full shortcode support You can insert multiple Scrollsequence animations anywhere on page.
BUSINESS:
Cloud Media Tools: A collection of handy cloud based media tools.
Video to Image Converter: Convert source video into a sequence of images in seconds.
AI Frame Former: Increase number of image frames from your video in our cloud service for smoother animation.
WP Media Gallery Import: Import still images from your video directly to WP Media Gallery with one click.
Compatibility
We do our best to test at every different browser, device, and configuration. So far we are getting great results with performance accross all platforms. Scrollsequence runs on proven and stable Javascript libraries, and plugin has been developed according to Wordpress Coding Standards.
Browser Compatibility:
Chrome
iOS (Safari)
Firefox
Android
Page Builder Compatibility:
Elementor
Divi
Oxygen Builder
Beaver Builder
Scrollsequence is compatible with all page builders. Simply enter the shortcode and your are good to go.
Compatibility with other Themes and plugins:
Contact us if you find any issues with conficting plugins and themes.
There are number of ways how to install the plugin. First you need to get the installation zip file and then to upload it to your wordpress installation.
Navigate to your Wordpress Admin Dashboard. Click on 'Add Plugin' and upload the zip file to your WP installation. After plugin is installed click on Activate.
Activate License
Click on Upgrade in Scrollsequence sidebar menu.
Select license that you want and follow instructions on the screen.
Your account becomes accessible directly from Wordpress menu.
Have fun!
After plugin activation look for 'Scrollsequence' menu that was added on the left side of admin dashboard.
Info: It's recommended to download directly from our servers for the latest version.
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 practise 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 embedd a separate video. After you are done with 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 seamlesly.
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 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 simplifing long animations and separating images into groups. Each scene has it's own images, content, settings and animations.
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 (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.
Add Images to be displayed Select and confirm image selection.
If you do not have your own images available, you can use one of our Image Packs
(Pack 1,
Pack2).
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 practise is to start with something that look 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 fit 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 ID's are used as selectors for on scroll animation, details are described in paragraphs below.
Classes and ID's are used as selectors for on scroll animation
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 loose 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. It's 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. This is because most browsers handle scroll on a different thread and it takes about 1/60th of a second for Javascript to realize that the sequence should be fixed to the screen.
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 too 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.
Advanced Use
Image Preload Event
In case you are using external preloader plugin, you can hook into the ssqPreloadPercentage javascript event. This even fires once enough images are preloaded and preload percentage is met.
Below is an example on how to listen to ssqPreloadPercentage event. This script is best to put before the ssq-lib*.js file so the event is captured correctly.
// Listen for the event.
document.addEventListener('ssqPreloadPercentage', function (e) {
console.log('Preload Percentage Has Been Met ')
}, false);
Media Tools
Business Plan
ScrollSequence Business plan offers powerful Media Tools designed to help users convert videos into a sequence of images. This feature is particularly useful for creating engaging scroll sequences from video content.
14 Days Free Trial. Payment method required. Cancel Anytime before the period ends.
Video Convert
The Video to Image Converter is a straightforward tool that allows users to transform their video content into a series of high-quality images.
This tool is perfect for users who want to create a scroll sequence from a video file. Simply upload your video, and the converter will output a sequence of images that can be directly used in ScrollSequence.
Video Convert tool allows to import the images straight into your WordPress media gallery.
Options
File Prefix : Choose a name prefix for your files. Files will be named file-prefix-00001.jpg, file-prefix-00002.jpg, file-prefix-00003.jpg... .
Quality: There is a choice of Aggresive compression for smallest file size, but with some quality loss, Optimal for image that has been optimized with a good balance between size and quality and Original which keeps the original quality from input video.
Maximum Resolution: Normally we recommend using images not larger than 1920px, so the default option is Downsize. If you wish to use 4K resolution images, you can by choosing No Resize
AI Frame Former
Scrollsequence integrates with AWS Elemental MediaConvert using Frame Former.
This AI-powered tool uses machine learning algorithms to form new frames and increase the video framerate to 60 fps.
The result is a smoother, 60 fps video that accurately represents the video content and enhances the visual impact.
Options
File Prefix : Choose a name for your output file.
Examples
We have done few examples for you that you can explore and be inspired in creating your own. As time will go on, we will be adding more and more to the list.
You might need some extra help creating, editing, preparing and fine-tuning your images before you are happy with how it scrolls. In this section we try to point you in the right direction, if you want to know more about what other tools might help you be creative.
Converting video to image sequence
Good starting point could be a video that you want to use as a base for your scrollsequence.
Scrollsequence Video Convert: New Since version 1.5.0 you can use Video Convert Tool for converting video to images right inside Scrollsequence
Adobe® Premiere Pro: Great professional video editing tool
VLC Media Player Legendary video player with amazing functionality. It can export to still images too
https://www.youtube.com/watch?v=4NuK7wSQUNs or written tutorial https://www.isimonbrown.co.uk/vlc-export-frames/
Once you have your images ready, you want to make sure that they are in the right format and more importantly that they are optimized. Size and image quality are the most important factors extra care needs to be taken to make this right. If you have Scrollsequence PRO, you don't have to worry about anything and we do it for you. But if you want to optimize images yourself, here are some tools to use.
Some Wordpress plugins may alter the way how images are loaded and displayed. If you are having problems with images displaying properly, try to disable any image optimizers
Take care when using 3rd party image optimisation plugins. Compatibility testing in progress.
Video Tips
If you plan to shoot custom video for your scrollsequence, have in mind the following.
No motion blur Motion blur looks good on videos. If you shoot a video for scrolling stop-motion you don't want to end up with blurry images.
Depth of field In classic videos, common practice is to focus on the subject and blur what is out of view. This might get you varied results when making a scrollsequence.
Framerate Stick to the standard 25 fps. Only if you are trying to capture a really fast movement, shoot in better framerate. Most of the time you are going to really use between 10-20 frames per second depending on the application.
If your video has low fps and fast movement, you can use our Scrollsequence AI Frame Former ToolNew. It automatically converts your video to 60 fps.
3D Model Animation
Do you have a 3D model of your product and want to use it for showcasing your product in a unique and mind blowing way? You are definetly in the right place.
You can either use built in Animation in your CAD package. Inventor, Creo, Solidworks have basic animations and moving image exports built in.
Responsivity
When designing a modern website, making sure that it is correctly displayed on every device used to be a difficult task. Luckily Scrollsequence has been designed to make it as easy as possible. The application is using Javascript to determine if the device is landscape, or portrait.
You can have individual settings for Desktop and Mobile display of the image sequence.
These settings can be different for every scene in sequence. So if your animation character changes between scenes, you can adapt the responsivity to it.
Image Scale
Scale to Fill - Scale to fill is the default setting. The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit
Scale to Fit - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box
Image Alignment
Horizontal Alignment - Center is default horizontal alignment. Apart from that you can align your images left and right.
Vertical Alignment - Center is default vertical alignment. Apart from that you can align your images top and bottom.
Window Resize
Each time there is a window resize even, the image gets rendered again to respect the new window size. This ensures 100% responsivity of your webpage according to W3 standards.
Hide Scrollsequence On Mobile, Tablet Or Operating Systems.
If you wish to prevent Scrollsequence to load on some devices or operating systems, use the hide shortcode parameter that can have multiple of options:
[scrollsequence id="your_ssq_id_here" hide="isMobile"] - hide on mobile (phones and laptops)
[scrollsequence id="your_ssq_id_here" hide="isNotMobile"] - hide on devices that are not mobile
Tablet:
[scrollsequence id="your_ssq_id_here" hide="isTablet"] - hide on tablet
[scrollsequence id="your_ssq_id_here" hide="isNotTablet"] - hide on devices that are not tablet
Phone:
[scrollsequence id="your_ssq_id_here" hide="isPhone"] - hide on phone
[scrollsequence id="your_ssq_id_here" hide="isNotPhone"] - hide on devices that are not phone
iOS:
[scrollsequence id="your_ssq_id_here" hide="isiOs"] - hide on iOs
[scrollsequence id="your_ssq_id_here" hide="isNotiOs"] - hide on devices that are not iOs
Android:
[scrollsequence id="your_ssq_id_here" hide="isAndroidOs"] - hide on Android
[scrollsequence id="your_ssq_id_here" hide="isNotAndroidOs"] - hide on devices that are not Android
Combinations: (experimental - not recommended)
[scrollsequence id="your_ssq_id_here" hide="isiOs isAndroidOs"] - hide on iOs and Android
Note 1:
There is also a new Show Development Information option to show Device Detect debug information on the page. So when a Scrollsequence is hidden, you can debug why.
Note 2:
Please note that Chrome dev tools (F12) results in isMobile === true, so if you hide on mobile, you can not debug scrollsequence in dev tool unless you change this behavior.
Common Issues
Few words on common issues that you may encounter.
Image Sequence Is Not Displayed
Check the width of scrollsequence-canvas<div> in your DOM. It should be greater than zero. Sometimes width is set to zero if you insert the scrollsequence shortcode into fluid/flex container. To overcome this, force desired width with CSS.
Check that some of your active plugins are not calling shortcodes multiple times. Deactivate unnecessary plugins to check if some of the may be conflicting.
Cannot Save Scrollsequence
This happens if some of the required values have not been entered. Check all scenes for missing fields like duration or animation properties.
Cannot Save More Than Few Hundred Images In A Sequence
Check PHP max input variables in WordPress Admin -> Tools -> Site Health -> Info -> Server. Maximum input variables should be greater than the number of images that you want to have in a scroll sequence.
Scrollsequence Starts or Ends Too Soon Or Too Late And Jumps
We are calculating as much as possible in advance. When there are some fancy CSS transitions, or height of elements changes on user interaction, Scrollsequence may start or stop sooner or later than anticipated. To correct this, call
ScrollTrigger.refresh() javascript function each time there is a significant change in document height.
See more about this issue in this knowledge base article
