Author: ales.kozelsky

blog

7 inspiring examples of image sequence scroll animation

Post author By ales.kozelsky
Post date January 8, 2023

Image sequence scroll animation is a powerful tool for creating visually appealing and engaging web experiences. By using a series of images that change as the user scrolls up and down the page, you can add interactive elements and bring your website to life. In this article, we’ll explore inspiring examples of image sequence scroll animation in action, highlighting the creative ways in which designers and developers are using this technique to enhance their websites. Some of the website have been made using Scrollsequence WordPress plugin, but other have been using other tools or coding.

You can also check out how Sony, Apple and other big tech companies leverage scroll animation on product pages.

List of Scroll Animation Examples

Wild Vikings Website Analysis. Advanced Scroll Animation — WildWikings

(Click to be moved to the relevant example)

1. WildVikings

WildVikings NFT website have used a rendered 3D model that rotates and zooms in and out on scroll, the site is fully responsive and loads the images depending on the device to maximize performance. The animation was done with Scrollsequence, but the text animation was done using Elementor. Check out Elementor and Scrollsequence integration article to learn more.

2. QuarkBaby

QuarkBaby website features a “Interactive Walkthrough”, on their product pages. Once you click on it, there is a modal window, that loads a Scrollsequence that showcases the main features of the product in a visual and informative way. As you scroll up and down, the product is presented, assembled in front of your eyes, and you immediately get a grasp of how it works.

3. Framed Academy

“Framed.academy” have achieved a unique touch by creatively using animated hand that moves as you scroll up and down on the page. The animation reflects their style and matches their brand, creating a unique experience.

START NOW

Learn Scroll Animation with Scrollsequence WordPress Plugin Today!

4. Roxanalytics

“Roxanalytics” have a responsive website that uses image sequence animation hero section to create a dynamic and interactive layout. As the user scrolls, the layout zooms out, with different elements sliding into place and fading in and out into their logo. The result is a visually striking and immersive experience that showcases the capabilities of image sequence animation with Scrollsequence.

5.Sea Drone Pro

“SeaDroneProXROV” Uses similar technique to QuarkBaby or Apple Airpods, where the product is represented by a 3D model. It moves as you scroll up and down and it’s features are shown in detail. You can see also some construction and deconstruction of it’s parts, so you can quickly understand how it is build, just by browsing the website.

6. DJI Drone

“DJI Mavic 3 Drone Product Page” Famous Drone company DJI is using scroll animation in their product pages, like many other tech companies. The overall design is similar to what Apple does with their product pages, but their animation are more simplistic.

7. Apple Product Pages

Apple AirPods Pro and other product pages feature inspiring and very clean and minimalist use of scroll animations. Have a read on how they have done it in our deconstruct article.

Learn Scroll Animation with Scrollsequence WordPress Plugin Today!

START NOW

Conclusion

If you are interested in this technology, check out our scroll animation basic tutorial, or have a glance on our examples!

how-to

How to: Image Sequence Animation in Beaver Builder

Post author By ales.kozelsky
Post date March 25, 2022

In this article we will look on how to make Image sequence animation in Beaver Builder. Sequence of images that play and rewind as you scroll up and down on the page. This is part of a series that focuses on Scrollsequence WP plugin integration.

First two steps are focusing on plugin installation and creating a basic animation, if you already know that, you can skip to the integration to Beaver Builder

1. Install Scrollsequence WP Plugin

Scroll sequence page builder integration — Scrollsequence install and activation steps.

There is a choice between Free and Pro version of the plugin.
Even with the free version, you can make it work. We also provide a free 14-day trial so that you can check it out for free and upgrade if you like.

download scrollsequence

2. Create Animation

Below it is described how to make a simple animation in Scrollsequence.

Scrollsequence - Scroll Image animation - Add new sequence — Add New Scrollsequence to your WordPress site.

For that, firstly go to the ‘Scrollsequence Menu’ on the left side of your dashboard and click on the ‘Add New Scrollsequence’.

In the next steps create a new scene and add images to the Scene.

After you’ve selected and added the images, a new editor section called ‘Fixed Content’ will appear on top of it. It’s used to overlay headlines and other text on top of an image sequence. There is already a default header in place with ‘Another Day on Earth’.

Scrollsequence background scroll animation settings — Background and Text Animation on Scroll

Let’s not spend much more space with the details on how to make an animation. You can have a look at how to create scroll animation and a general introduction articles.

3. Add Scrollsequence Image Animation To Beaver Builder

I am sure you are familiar with Beaver Builder. It is an intuitive WordPress website builder. It works in real time on the front end of your page. Live, Front End Editing – what you see is what you get.

Firstly, make sure that you’ve Beaver Builder is installed on your website whether free or premium.

Scroll sequence Beaver Builder Integration - Launch Beaver Builder — Create a new page and Launch Beaver Builder

Then, you need to go to the page you want to add the animation and launch it with Beaver Builder. Afterward, you’ll be directed to the Beaver Builder’s page editing interface.

Scroll sequence Beaver Builder Integration - HTML Widget — Go to Beaver Builder and use HTML module

Now, from the right sidebar, you can drag the HTML module to the page.

Scroll sequence Beaver Builder Integration - Scroll sequence Shortcode Paste — Paste the code in General box and press Save button.

Then, paste the shortcode that you copied previously in the ‘General box’ as shown above. And you need to click on the ‘Save’ button just below that.

You can also preview the scroll image animation in the back end just as shown in the above GIF. As our plugin Scrollsequence seamlessly integrates even in the back end of these page builders.

If you like your scroll image animation, then you can publish it right away. And, there you go with your animation added using Beaver Builder page builder.

Conclusion

folks! We’ve come to the end of our article on how to make scroll image animation and integrate it Beaver Builder in WordPress.

how-to

How to: Image Sequence Animation in Divi

Post author By ales.kozelsky
Post date March 25, 2022

Are you fascinated by the scroll image animation that you see on Sony, Apple, or Samsung websites? We are going to talk about image sequence animation in Divi page builder.

In general, you can understand scroll image animation as appealing animated images that play and rewind as you scroll. Therefore, you can also create scroll image animation web pages on your WordPress site to draw your visitors to your site.

Thankfully, it’s possible with our Scrollsequence plugin. It’s a handy plugin that allows you to quickly create attractive animation effects. And it’s totally compatible with various page builders such as Beaver Builder, Elementor, Divi, and more. This way, you can add them to various pages effortlessly.

1. Install Scrollsequence WP Plugin

download scrollsequence

2. Create Animation

There are some useful articles on how to create scroll animation and a general introduction tutorial. Have a read through them if you feel like you need to start fresh.

3. Add Scrollsequence Image Animation To Divi

Divi’s is a visual page builder. You drag and drop page sections rows and modules to build any type of website by combining and arranging content elements.

To add Scrollsequence to Divi, just follow the steps below. It’s quite simple!

Scroll sequence Divi Integration - Divi Builder Start — Click the plus button and search for Divi Builder

Now, you need to go to the page where you want to add the animation. And go to the Plus (+) button to type in ‘Divi Builder’ and click on it.

Scroll sequence Divi Integration - Start — Click on Edit With The Divi Builder

Then, you’ll see ‘Edit With The Divi Builder’, click on it.

Scroll sequence Divi Integration - insert shortcode — Go to Insert Module and search for Code wizard

Following that, in the Insert Module search bar, type in ‘Code’. Once you’ll see the code wizard, click on it.

Scroll sequence Divi Integration - Shortcode — Paste the shortcode into the Code wizard and press the ✓ icon

Now, paste the shortcode that you copied previously and paste it into the Code box. Then, click on the right (✓) icon just below it to save the changes.

download scrollsequence

Scrollsequence Divi Integration – Scroll up and down to play and rewind the Image Sequence Animation.

Conclusion

That’s it, folks! We’ve come to the end of our article on how to make scroll image animation and integrate it Divi in WordPress.

We genuinely hope you enjoyed this article and now can make scroll image animation effortlessly and add it with various page builders using our Scrollsequence plugin.

If you’ve any queries or confusions related to making scroll image animation or Scrollsequence plugin, then leave a comment below. We’ll respond to you as soon as possible. Also, if you’re already using it to make animation, do leave your thoughts below.

Lastly, don’t forget to share this article with your friends and family. Do follow us on Facebook,and Twitter for more related articles.

how-to

How to: Image Sequence Animation in Elementor

Post author By ales.kozelsky
Post date March 25, 2022

You have been wondering how to make Sony, Apple, or Samsung style image sequence animation in Elementor? Look no further, we are going to dive deep into the visually striking animation technology.

Scrollsequence allows you to seamlessly Scroll through video cut up to individual image frames. On top of the animation you can add any interactive content and animate it in sync with the video animating in the background. It is available as freemium WordPress plugin.

In this article we are going to discover, how easy it is to encompass the animation sequence in Elementor Page Builder

Elementor is the leading website builder platform for professionals on WordPress. It serves web professionals, including developers, designers.

1. Install Scrollsequence WP Plugin

download scrollsequence

2. Create Animation

So, now let’s get down to the exciting part that is creating animation with our Scrollsequence plugin.

For that, firstly go to the ‘Scrollsequence Menu’ on the left side of your dashboard and click on the ‘Add New Scrollsequence’.

Scrollsequence - Scroll Image animation - Enter title — Add new Scrollsequence. Don’t forget to enter title.

Following that, you need to click on the ‘Add Scenes’ option to add images to create its moving effect. On clicking it, you’ll see that ‘Scene 0’ is created for you to add your images. Also, you can create as many scenes as you want by clicking the Plus (+) icon next to the Scene to add additional scenes.

Scrollsequence background scroll - image select — Select image media attachments

You can wish to alter it to reflect what you want to show. So, here we’ve changed it to ‘Rotating Watch’ for now as shown above.

Scrollsequence animation settings - ID for Heading — Change ID of the heading element

Also, you can change the heading ID, by clicking on the ‘Text’ editor. You can see that by default, there is ‘on-earth’. So, let’s change into the ‘rotatingwatch’ here as shown above.

Scrollsequence animation settings — Click on Add Animation button

Following that, you can also add animation to your heading. To do so, click on the ‘Add Animation’ button that’s located just below Fixed Content Animation.

Then, you’ll see a new animation menu appear in the User Interface. There you’ll find 3 options boxes that are:

Selector: Here, you need to type in the IDs of the elements you want to animate, starting with a hash (#). For example, #rotatingwatch.
Start: This field is to select the image number where you want the animation to begin. We want the heading animation to appear from image 15. So, let’s put 15 as a starting point.
End: Enter the image number to bring the animation to a close. So, let’s put the ending point of heading animation as 100.

Following that, you can also, select the animation effects at the start and end of the animation, i.e. ‘From Animation’ and ‘To Animation’ sections.

Here are some useful articles on how to create scroll animation and a general introduction tutorial. With that out of the way, let’s get to the core!

3. Add Scrollsequence Image Animation To Elementor

Let’s go ahead and add animation using the Elementor page builder. Also, do make sure that you’ve already installed Elementor whether free or premium.

Scroll sequence Elementor Integration - Launch Editor — Edit with Elementor

Now, you should go to the page where you want to add the animation and click it in ‘Edit with Elementor’ as shown above.

Scroll sequence Elementor Integration - Elementor widget — Add the Scrollsequence to Elementor Shortcode widget

Following that, you’ll see the Elementor page editing interface. After that, search for the ‘Shortcode’ widget in the left sidebar. Then, you’ll see the shortcode widget just beneath it. You can drag and drop the widget in the page area at the right.

Scroll sequence Elementor Integration - Shortcode Paste — Paste the Shortcode and click on Apply

In the left sidebar, you’ll see the ‘Enter your shortcode’ box. There, you need to paste the shortcode of your animation that you copied last time. Afterward, you’ll need to click on the ‘Apply’ option.

Scroll sequence Elementor Integration - Shortcode — Insert Shortcode to Elementor Shortcode Widget

Following that, you’ll see a page as shown above. As mentioned before, our ScrollSequence plugin seamlessly integrates even on the backend of these popular page builders.

As shown in the above GIF, you can Live Preview your scroll image animation right from your backend. In addition, this saves a lot of time as you’ll not have to switch back and forth between your frontend and backend.

Once everything is finalized, now all you need to do is click the ‘Publish’ button at the end of the page. Pretty easy right?

Conclusion

That’s it, folks! We’ve come to the end of our article on how to make scroll image animation and integrate it Elementor in WordPress.

We genuinely hope you enjoyed this article and now can make scroll image animation effortlessly and add it with various page builders using our Scrollsequence plugin.

Lastly, don’t forget to share this article with your friends and family. Do follow us on Facebook,and Twitter for more related articles.

blog

5 Tips to Boost Conversions with 3D Models, CGI & Product Video

Post author By ales.kozelsky
Post date April 29, 2021

The biggest challenge for putting a product on the market is to clearly communicate the function, features, and it’s added value. Use of 3D models and CGI video in marketing is a great tool to increase conversion rate. People spend more and more time online. In effect their decision-making process on what and where to buy is transitioning to digital space. So how to effectively use 3D models and animations in your marketing campaign? Read on!

Table of contents:

What is a 3D Model
Making of a 3D Model
- Software Options
Digital Marketing and CGI
Use of 3D Models and Animations in Marketing and Web Presentations
1. Rendered Video Animations
2. Scroll sequence
3. Embedded 3D Models
4. Augmented Reality
5. Rendered Images
Closing Words

What is a 3D Model?

3D modeling is the process of developing a mathematical representation of an object in three dimensions via specialized software. A 3D model can either be created from scratch by an engineer or artist. It can also be manually or automatically reverse engineered from an existing object. Most of the time, models are separated in two categories. Solid models and surface models. Solid models represent the volume of the object. Surface models define the object’s boundaries and are many times hollow inside or have no thickness.

Solid 3D model used for interior furniture product marketing

Surface model of a beverage can. Example of digital rendered image for marketing use — Surface model of a beverage can

Making of a 3D Model

When creating a 3D model from the start, we can use several different techniques. Simple techniques for engineering design start with a 2D sketch. Then Revolve it around an axis or extrude the sketch to get a 3D shape. If you aim to create a more artistic creation, polygonal modelling or sculpting will give you more freedom.

If you have a real object you want to draw, there are the following ways of how to do it. Old school way is to hand measure the object and use measurements for creating a model manually. On the other hand, more modern way is to use photogrammetry or a 3D scanner that will scan and automatically create the desired shape.

Software Options

Engineering
- Catia – often used in automotive industry, for example for surface modelling of car chassis
- Creo (formerly PRO/Engineer) – general mechanical engineering CAD package, which some rendering and visualization export options.
- Inventor – Autodesk product, one of the pioneers of CAD parametric solid modelling. Similarly it comes with rendering and visualization options.
- SolidWorks – French Dassault Systemes software package for engineering.
- SolidEdge – Siemens CAD engineering package, also with rendering and export options
Architecture
- AutoCAD – One of the first CAD softwares, 2D,3D modelling widely used in variety of industries. Also with good export for rendering and visualization.
- Fusion360 – Autodesk product, similarly to other products from Autodesk it has rendering and visualization options. Fusion 360 has gained popularity due to its versatility. It’s all-in-one solution.
- Revit – Another member of Autodesk product family, likewise it’s easy to produce beautiful renders and animations
- Rhino3D – Popular for architecture drawings and models. You can also create animations and renders easily.
- SketchUp – Free tool from google
Other Software
- Adobe 3ds Max – Professional tool for creating 3D animations used by many film studios
- Adobe Dimension – Product from Adobe family designed for Photorealistic 3D images for photo realistic product and packaging
- Blender – Opensource, free modelling tool for 3D modeling and animation. Easy to learn, in other words great for starters
- Cinema4D – Cinema 4D is a professional 3D modeling, animation, simulation and rendering software solution

Digital Marketing and CGI

Digital marketing and CGI (computer-generated imagery) are very close friends. Many adverts on Instagram, Youtube or Facebook have been either completely created or enhanced using computer graphics.

Most likely, the product you are selling has a 3D model, so let’s use it for your marketing material, and increase your conversion rates with use of the technology available.

Creating thumb stopping, revolutionary and brave content is key to grab users attention, so companies invest considerable amount to create the best content possible.

Top 5 Ways to Increase Conversion Rates with 3D Models, CGI and Animations

1. Rendered Video Animation

Video has become the most commonly used format in content marketing, overtaking blogs and infographics. Aberdeen Group says marketers who use video get 66% more leads per year. Most manufacturers, architects, engineers and tech companies present their products with use of video. 83% of video marketers say video helps them with lead generation.

People also embed videos in their newsletters that are created using email newsletter software as a part of their marketing strategy. In many cases, marketing videos are partially or fully rendered in 3D.. Almost every consumer electronics, fashion or car company has used CGI video ads at some point. It has become more and more challenging to stand out from the competition by using video, when every competitor is doing something similar.

Example of digitally rendered video used as advertisement

2. Scroll Sequence

Scroll sequence is like a video you can play and rewind with mouse scroll or touch. In addition, pair the animation with other HTML content like headings, text, buttons, links to create a completely new web experience. You can use existing marketing videos, convert video to image sequence and transform to immersive web presentations that showcase your product in a completely new and interactive way.

With Scrollsequence It’s easy to make jaw dropping content that skyrockets your conversions and customer engagement.

.scrollsequence-wrap {height:initial!important;} .scrollsequence-pages-wrap {height:initial} .scrollsequence-page {position:relative;opacity:initial;display:block ;visibility:initial}

Interior

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

How to add Scrollsequence to your site?

Scrollsequence is a WordPress plugin, download and install it on your server. Follow our getting started video below, and you will find it’s pretty easy to integrate into any WordPress based website.

Increase conversion rates with immersive digital marketing

Scroll sequence technology is relatively new. So far only the big tech companies like Apple, Sony, and Samsung were able to afford it’s implementation. With our Scrollsequence WordPress plugin, we have made it available to everyone. We have made it easy to create a mind-bending, immersive web experience.

3. Embedded 3D Models

Once you have your 3D model ready, you can use an open source library like Three.js, or some paid solutions like Sketchfab, Emersya, Modelo, or Vectary to directly display the 3D model on your website. Most solutions allow the users to manipulate with the model, zoom it in and out and allow them to get familiar with your product. While embedded 3D models work well on desktop, on mobile devices this may be problematic. Similarly browser incompatibility, loading speed, and maneuverability a small screen device can be a problem.

4. Augmented Reality

Similarly we can insert an augmented reality model. However, most desktop devices are not capable of displaying AR.

5. Rendered Images

If you want to sell on the internet or you need to visualize a product in its packaging, in this case photorealistic rendering can simplify your life. There are many good reasons for using computer-generated imagery (CGI) in marketing. Therefore if you want to showcase your product in advertising campaign or on the web, 3D modeling as a marketing tool holds great benefits. Also make sure images are be optimized to improve loading speed and SEO.

Conceptual interior room 3D illustration

how-to

How to make scroll image animation like Sony, Apple and Samsung

Post author By ales.kozelsky
Post date February 2, 2021

Animation that plays and rewinds on scroll. Holy grail of immersive web experience that can significantly increase your conversion rates. Image animation on scroll is nothing new, but it’s implementation was very challenging and daunting to accomplish. In this article we are going to talk about various ways how to achieve this effect both the hard way and the easy way!

Brief history of image sequence on scroll

There has been only handful of leading edge tech companies, who have invested considerable budget on their web presentation and development of the effects that make them stand out from their competitors.

Sony Be Moved

Sony Be Moved (website recording)

First website of its kind, miles ahead of it’s time. Launched in 2014 now discontinued, but still you can see recorded video of how it looked back then. Watch a deconstruction from ihatetomatoes.net here.

Apple Airpods Pro

Apple Scroll Sequence Image Animation — AirPods Pro Website

Apple was the second big company who was able to utilize this technology, and they have been able to push the boundaries even further. Interesting article from Naker deconstructing the site here or a video from ihatetomatoes.

Samsung Galaxy S21

Samsung Scroll Sequence Image Animation — Samsung Galaxy S21 Website

On their product site, they haven’t over used the effect, but still have been able to achieve a nice interactive feel on their website.

How to create scroll animation like Sony, Apple or Samsung?

Vanilla Javascript, Animation library, or ready made WordPress solution like us? Which is the right approach for you if you want to create animated sequence of background images that play and rewind on scroll?

In this article we are going to research and compare the various options of achieving that sought after effect, that will leave your a strong impact on your audience.

You need the right skills and big budget to code a bespoke solution yourself. Be prepared for quite a few hoops to jump through.

Scrollsequence WordPress Plugin
Write your own Javascript
1. Vanilla Javascript
2. Use of Javascript Animation Libraries
  1. GSAP (Greensock animation platform)
  2. ScrollMagic Javascript Library
  3. Velocity.js

You need the right skills and big budget to code a bespoke solution yourself. There are quite a few hoops to jump through, and you have to be extra efficient with your code performance.

1. Scrollsequence WordPress Plugin

Scrollsequence is without a doubt the easiest way, how to integrate scroll image animation to your website. Pretty much all of the challenges below have been taken care of. All you have to do is upload the images to WordPress and focus on the message you want to tell your audience.

Examples:

Have a look on simple example with a blonde girl opening and closing her eyes on scroll, there is also a deconstruction and explainer article about said example.

If you like futuristic touch, have a look on Cyberpunk example.

Get started with scrollsequence

2.Write your own Javascript

Below is a list of considerations when creating scroll sequence with custom Javascript.

1. Video versus image sequence

Early on you need to make a decision if to use a video or sequence of images as a source.

Video is not designed for scrubbing backwards and forwards. Correct video format and encoding are key in order for the animation to work. If you use incorrect format it can happen that only few frames of the video will be displayed, ruining the experience. While it may play smooth on one device, you can have problem on others. See example from GSAP forum, and another one on codepen.
Sequence of Images is simpler and straightforward solution. Downside is that sometimes images have bigger size than a well compressed video. Vanilla Javascript example on css-tricks.com
Image sprite animation is also an interesting alternative. Instead a lot of images, you connect them into a sprite and then move the sprite around to achieve desired effect.

2. Which HTML tag to use <canvas> <img > or <video>?

HTML5 give you a number of ways how to dynamically display images in rapid succession to achieve animation effect.

The oldest trick in the book is use of <img> tag and Javascript to dynamically change it’s src attribute. I don’t recommended to use this, because the of very annoying flashing during the animation caused by decoding. There are ways around it like using multiple images over each other and z-index, but really <img> element is not recommended for this case.
If you decided to use video as source use the more modern <video> tag. Once again, using video as source has it’s drawbacks, but this is a valid path to go through.
The most advanced and performance oriented HTML5 tag is <canvas> utilizes Canvas API built for dynamic elements, animations or even games that run in browser. You can draw anything on canvas from images, video, 3D objects or anything that you want. All with the best possible performance. The most expensive part is image decoding, so you have to carefully execute it.

3. Javascript Scroll Image Animation Performance

The most important part is to have your code written efficiently. There is no room for useless operations like drawing the same image twice.

Use passive scroll listeners for detecting the scroll position
Throttle the scroll event and tie it to requestAnimationFrame, only draw on canvas when there has been a change, if you draw same image multiple times, you get in trouble.
Pre-calculate as much as possible in advance. Only hook the necessary functions with extra attention to performance to the events that happen each scroll.
The most expensive operation is image decoding. Decoding is necessary operation that takes compressed .jpg or .png and decode it to a bitmap. To efficiently decode the images there are several approaches, but not all are compatible with most browsers. See image.decode(), createImageBitmap, JS web worker and offscreen canvas for reference.

4. Responsivity

Depending on what approach you select, you need to be clear on how the animation will look on different devices, and how it will behave if the window resizes. For Canvas tag you have to handle the resize even yourself, re-drawing the canvas with correct size of the image each time. Don’t forget to throttle and debounce the resize event, as on mobile devices the resize event fires each time when address and navigation bar is moving away.

5. SEO

Most search engines do not run Javascript. Even google first indexes the static HTML and then only if it decides to, it may or may not index your site with Javascript on. That’s why you need to think ahead on how the animation will be displayed with disabled Javascript

6. Image pre-loading and caching

When preloading a large quantities of images, Largest Contentful Paint [LCP] may be affected. To avoid that, the best advice is to preload the images after the LCP event. Scrollsequence is preloading only the necessary images on page load. All the others are preloaded in the background, while user is scrolling.

7. Cross device-compatibility

This is one of the most challenging tasks. Every browser, every device, and even Javascript version can have an effect on performance. Especially tricky is to have a smooth animation on browsers like Internet Explorer.

8. Fallback in case of disabled Javascript

What to display if user has disabled Javascript? Do we really want them to see a broken website.

9. Image Optimisation

Last but not least, you want to keep file size to a minimum. To learn more, read our article about Bulk Image Optimisation.

1.1. Vanilla Javascript Scroll Animation

Using Vanilla Javascript is the most challenging option, but those who succeed get the the most control on how is animation pre-loaded, displayed and served to the visitor. Nevertheless it gives you the most control over everything that is going on.

Follow tutorials below:

Let’s Make One of Those Fancy Scrolling Animations Used on Apple Product Pages (css-tricks)
Image Sequence Animation on Scroll (codepen)

1.2. Use of Javascript Animation Libraries

GreenSock Animation Platform (GSAP)

Okay, well GSAP is the number one choice if you are after high performance animation Javascript library. GSAP is lightweight and people use it in some of the most advanced applications, games and animations.

GreenSock is the recommended Javascript library for scroll image sequence animation,

It’s free for non commercial use, and you have to pay a small fee in some cases.

In 2020 folks from GreenSock released ScrollTrigger addon, which is made for high performance scroll triggered animations.

GreenSock is the recommended Javascript library for scroll image sequence animation, it has all the main parts, and a lot of the advanced ones like scroll delay already built in.

Creating Awesome UI’s that Animate Only On Scroll (youtube video using GSAP)
CodePen Demo (AirPods)

ScrollMagic Image Sequence

Scrollmagic is an addon for GSAP. You can find few tutorials online on how to use it, but it’s performance and support are not so great. While it was a good choice in the past, now ScrollTrigger has superseded ScrollMagic in many ways.

Image Sequence Example (ScrollMagic)
Apple Airpod Pro Javascript Animation Tutorial (Youtube video from DevEd)
Animated Video Scroll Render for Web with Bodymovin & ScrollMagic JS (Medium)

JQuery Sequencer

Very simple, single use JQuery animation library, it seems that it does the job – we haven’t tested this one, give it a go and let us know

Closing Words

Using Javascript, either vanilla or with use of GSAP might be your choice when you have the skills and buget to write your own code. If you have WordPress, and want to keep things simple, Scrollsequence is the easiest and most user friendly way to have a scroll image animation on your website.

learning

Scroll Sequence Introduction – Basic Tutorial

Post author By ales.kozelsky
Post date January 26, 2021

This is a detailed example of what can be achieved with on scroll animated sequence of images. Idea is simple – animation play and reverse on scroll or touch. All is done within the WordPress UI using Scrollsequence plugin. There is no need for extensive coding. Anyone with moderate PC skills and HTML basics should be able to follow this article and achieve the same effect. Time required to complete is 20-50 minutes, longest is the image preparation phase. If you prefer watching to reading check out the video tutorial below.

Why to add Scroll Image Animation on your website?

User engagement, increased conversions, brand recognition. If users will like what they see, they are much more likely to share your website.

What are you going to learn today?

Today you will learn the easiest and most effective way how to create interactive cinematic web experience. We are going to take a video, chop it up, and convert it to a fresh and new experience that your audience will love. Have a look on the result Beauty Example.

Video Source(s)

The animation is made up of two videos (1, 2) from envato elements library, or you can find the first one on Vimeo (source: https://vimeo.com/433679875). Warning: For commercial use, you need to subscribe to envato elements and you get a license to use it along with full access to their vast database of stock videos. Here is a big list of some other free and paid stock video sources. My personal favorites are envato elements and pexels.

When selecting a video, it is important to pick one, where the motion is smooth, has a good frame rate and we want to avoid motion blur because it simply does not look good when looking at a static image.

Video to image conversion

Converting video to image sequence is a crucial step! There are many tools out there, but not all are the same. Have a read on how to convert video to image sequence. Most important is to convert all frames from the video in desired image quality and resolution. You may not use all images at the end, but select your conversion tool carefully, as some will give you only 30% of the original video frames. Not having enough frames will result in choppy behavior and we like things smooth as silk!

Recommended tools to use are VLC media player and FFmpeg. VLC is a simple, yet powerful and relatively effective way of conversion. Downside of VLC is that it depends on your computer’s performance. You may end up with 70-95% of frames depending on your computer’s performance. FFmpeg is a bit more sophisticated tool. For you to work with it, you need to input into a command line. In return, it will give you all frames in the full resolution. For production, FFmpeg is recommended with Scrollsequence.

Video (1)	Images
Resolution: 1920 x 1080 pixels	Resolution: 1920 x 1080 pixels
Duration: 17 seconds	Image Count: 511
Framerate: 29.97 frames / second
Frame count: 17 x 29.97 ~ 510 frames	File Size (each): ~120 kB
File Size: 291 MB (uncompressed)	File Size (total): ~15MB

Details of the first video to image conversion. Second video is not included in the table above.

Due to the nature of the video, where the movement is very slow, and there is not a lot of movement, it is not effective to use every frame. We want to achieve a smooth movement, but at the same time we don’t want to have the animation to be extremely large in size. Therefore, we are going to use only every fourth image, so instead of 511 images we are going to use only about 130. And there is another trick up in our sleeve to reduce the animation size even more. Read on and find out!

File naming is important

You want to name your files in such manner, so they get sorted correctly on your machine and in WordPress media gallery. Especially you want to include leading zeros when numbering the images. See below for example of good and bad file naming structure.

Bad file naming – image1.jpg , image2.jpg . . . image11.jpg
Good file naming – image001.jpg, image002.jpg . . . image011.jpg

Image optimization

As this is a basic course, we won’t get into the details of image optimization. Simply you want the images to have the smallest possible size so the page loading speed is fast, while not compromising quality.

For details on how to keep file size to a minimum, read our article about Bulk Image Optimisation. You will learn what tools to use to have the fastest loading speeds, without affecting quality.

It is common to use optimized images that have 40-70kb each in size.

Once you have your images ready, upload them to your WordPress media gallery and let’s roll!

Starting your first Scrollsequence

Click on “Add New Scrollsequence“, then click on “Add page”, page is something like a scene.

Add images

Add images to the first Page and voila, if you click on view, the animation is already working!

Earlier in the article, I have promised to learn you a neat little trick. If you look at what happens in the video, model opens up her eyes and smiles. It looks the same if you reverse the video. So why not display each image twice, to make the animation longer while using half the amount of images.

Content

Next step is to add content, style it with CSS and animate it. The styling depends on your theme. For the example we have used the TwentyTwenty Theme, so if you are using a different one, it may look different.

Page 0

HTML Content on Page 0

<div id="container1" class="bottom-left">

  <h1 style="display: inline-block; margin-right: 0.5em;">
      Tell your story
  </h1>

  <h1 id="text1" style="display: inline-block;">
      like never before
  </h1>

</div>

Animating Page 0

First let’s talk about CSS selectors. They are building stones of CSS. For use in Scrollsequence they allow you to select any element by either id, or class. When selector starts with “#” it means that it’s an id selector. If a selector starts with a dot ” . “ it means it’s class selector.

1) Id selector #container1

Enter starting frame 0 and ending frame 60.

From Animation – Select “Move From Vertical Offset” of 40% and duration of 40. This means that at frame 0 the elements start from 40% vertical offset and its going to be moving up to its position for the first 40 frames.

To Animation – duration is 19 frames consists and of two separate animations, “Fade To” and “Move To Vertical Offset”. Fade to opacity 0, meaning once the animation finishes, element will not be visible. And move to vertical offset means that once animation finishes, the element will be moved up by -127%.

2) Id selector #text1

#text1 is visible between frames 15 and 60. There is fade from opacity applied so it nicely fades into view over the last 10 frames.

3) Class selector .scrollsequence-canvas

This selector is used to control the properties of the animated background image that is painted on canvas where the images are painted. Canvas is high performance animation API, and it’s used by scroll sequence to provide a smooth animation experience.

We are fading the canvas out, making a seamless experience by gradually fading the canvas out over the last 10 frames.

**.scrollsequence-canvas** Animation Details

Page 1

Click on the plus sign on the top of the page to Add Page, repeat the same process and add the exported images from the second video. This time, because the model moves her hands quite quickly, and there is a bit more movement, we are going to use every second frame from the video resulting in 167 frames.

HTML Content on Page 1

Code below is very simple. There is a div, which ensures alignment of the text, see styling section below for reference. The second is a h1 element with id=”night” that we are going to select and animate.

<div class="bottom-left" style="color: white;">
    <h1 id="night">
      Another night on Earth.
    </h1>
</div>

Animating Page 1

1) Class selector .scrollsequence-canvas

First lets animate the fade in and fade out of the background image sequence. We have faded out the canvas in the last page, so we need to fade it back in. This is done by “From animation” and “Fade From Opacity” where we are going to fade from 0 to default (1) over the first 10 frames. At the end of this page we want the canvas to fade out, so there is a seamless transition to the content after animation is finished.

2) Id selector #night

#night id element is shown between frames 0 to 140 and we want it to Fade From 0 opacity and Move Up, and animate it to fade out to zero again and move up.

Image Responsivity

To ensure image size and scale look the way we want across all devices, there are few settings. We can scale and align the images for both screen aspect ratios – portrait (mobile) and panorama (desktop). Experiment and adjust the horizontal and vertical alignment to understand its principles. For this course, the best results are if we “Scale to fill” and leave the alignments on center.

Styling

Styling is done via Custom CSS field.

.bottom-left{
position:absolute;
left:4vw;
bottom:13vh;
opacity:0.8;
}


#site-header{
background-color:rgba(255, 255, 255, 0.5)
}

Settings

Scroll Delay

Zero delay means that once you scroll, the animation arrives instantly to its end point. If you scroll using a mouse it may seem a bit choppy. As a compromise to achieve a smooth animated effect on all devices, a delay between 0.5-1 seconds is recommended.

Image Width

Depending on your theme, you may want to force full width if your template is in a narrow container.

Image Opacity

With this simple setting you can change the opacity of the animated images, particularly useful if you have a colored background and want some tones of the background to be visible through the image.

Content Editor

At the very end there is another content editor. You may ask yourself – what is this editor doing here? Answer is simple. This is the WordPress native content, that is associated with the Custom Post Type. Whatever you write into it, it will act, as you would be writing a normal post or page.

It also acts as a way to precisely control the position and margins of the scroll sequence that we have just created.

<h1 style="text-align: center;">This is any content displayed before the animated sequence </h1>

[scrollsequence margintop="-155px" marginbottom="-200px"]

<h1 style="text-align: center;">This is any content displayed after the animated sequence </h1>

In the code above, notice that there is a heading before and after the shortcode. This positions the scroll animation between the two headings, simple as that! You can also position it at the beginning or the end of the page.

If you are going to be using the shortcode anywhere else on your blog, don’t forget to add the id option to identify which sequence to display.

Result

Even though this is quite a lengthy tutorial, it gives the full picture and touches all of the main subjects of creating a full page, immersive experience without much coding. If you have any questions or anything to say, comment in the section below!

learning

How to Convert Video to Images. Big Test of Free Tools

Post author By ales.kozelsky
Post date January 17, 2021
1 Comment on How to Convert Video to Images. Big Test of Free Tools

We are going to talk about how to get static images (.jpg, .bmp or .png) from video content on PC or Mac using free tools. There are many different software products out there, to make it easy for you we have picked the few of the most common, so you don’t have to try them all. If you are interested on how to optimize images, read Bulk Image Optimisation article instead.

With Scrollsequence, it is important to capture as many frames from the source video as possible without any duplicates. That’s why we have put the converters to a test to see if it captures really EVERY frame for you.

Video used for testing

Test setup is simple. In blender I have created a 5second .mkv FullHD video at 60 frames per second. That equates to 300 frames. Perfect result for an export tool would be to have 300 unique images at the end of the test.

Video details: 1920 x 1080 pixels, 60fps FFmpeg video with H.264 video codec at high quality.

Video Export Test Video.mp4 Download

Let’s start exporting!

Online Converters

1. Ezgif.com

Ezgif features a range of different online conversion tools. You can find here a lot of tools to manipulate video, gifs and images, watermark and all is done for free with a reasonable quality. So, lets put Ezgif to the test!

We have tested both video-to-jpg converter and video-to-png converter with following results.

ezgif.com/video-to-jpg

Only 1200px size and 20fps limits are allowed. After uploading the video and hitting export with the maximum settings we have received 101 frames from total 300 included in the video.

ezgif.com/video-to-png

Same 1200px size and 20fps limit applies here. We were able to get 101 frames back out of 300 and unable to download them all as zip. Website returned a 404 error.

ezgif Test Result

★★

101 of 300 frames at lower resolution

2. Online-convert.com

Online convert tool has a bit more options, and it does some basic quality optimizations for you as it exports them from the video. Nevertheless, from our test, we have been able to export only 51 frames from the total 300.

Online-convert

★★

51 of 300 frames

Desktop Software

Here we are going to talk about stuff that you can download from the net and install on your device, working with videos and images locally. We have tested for you the options that are out there, and listed the ones most useful when working with Scrollsequence.

3.VLC Media Player

A lot of you have already this player installed on your system, and maybe you don’t know that it can be used for exporting static images from the videos that you watch.

VLC media player is a powerful tool at your hand as it can not only export the images, but also apply filters, color correction and whole arsenal of visual tweaks.

Run VLC media player and navigate to Tools and Preferences.
Bottom left click on Show settings -> All and navigate to Video -> Filters and tick Scene Filter
In Scene Filter settings select the output format, image width and height. Take care to match the video source width and height! Choose filename prefix and directory path. Important: Recording ratio defines the ratio of images being saved. 1 being every image, 2 being every second image and so on.
Press play and the images are automatically saved in the desired folder as you view the video.

Test result: Even if you set a recording ratio of 1, which means it should record every frame, it does not. Results vary on the performance of your machine. Sometime is captures nearly all frames, sometimes it captures less. There is a way around it, and it is to reduce the playback speed of the video, which in turn produces duplicate image frames.

vlc media player

★★★★

280 of 300 frames

4. FFMPEG

FFMPEG is a very powerful tool. It can be quite tricky to use at first, because you have to use simple command line input, but it allows you to do almost anything. A lot of the desktop and online video processing tools out they are using FFMPEG under the hood. You can install FFMPEG on your server and do the work on server, or do it locally.

Download (gyan dev), Windows Install instructions, Convert Video to Images Instructions

FFMPEG returned all 300 image frames that were used to create the video. no more, no less

FFmpeg Test Result

★★★★★

300 of 300 frames

5. VCLIP

VCLIP is built on FFMPEG, it is a bare bones simple screen grabber. Due to the fact that it grabs the screen directly, you don’t need to store the video locally. You can also very simply grab just a part of the video, or capture simply anything happening on the screen.

VClip let’s you export stuff only to video, so how do we get the images? Before you save the output as video, the .bmp images are stored in Frames subfolder of the installation path.

Downside is that VClip provides only .bmp output.

VClip has only 15,25 and 30fps options. If you have a 60fps video, you better look elsewhere. VClip rendered about 150 frames depending on how soon you press play/stop and record buttons. Achieving Full HD native resolution was impossible. VClip is only able to capture a cut-out portion of the available screen.

VCLIP Test Result

★★★

150 of 300 frames at lower resolution

Test Results and Closing Word

FFmpeg (300/300)
VLC media player (280/300)
VClip (150/300)
Ezgif (101/300)
Online-convert (51/300)

Overall winner is FFmpeg with exporting 100% of the frames in their full resolution. It may be quite difficult to setup and learn, but provides the best results of all the free options that we have tested.

VLC media player is also a good option, if you want an easy way to get started, plus you may have it installed already., so why not to use it?

Online converters can bring fast results with minimal effort, but you cannot expect a good quality for images that you want to use for full screen.

Bulk Image Optimization Options

Post author By ales.kozelsky
Post date January 3, 2021

In this article we discuss the most common options of image optimization for web and WordPress. Free and paid services are compared for use in optimizing large quantities of images for use with scroll sequence.

It is key to have your images optimized. Below we discussed the ways on how to reduce size while maintaining the image quality.

2024 Update: Scrollsequence Business Plan has now a built-in video convert and image optimization tool. See more in Documentation

1.Offline Image Optimization

Caesium (Free)

★★★★★

Free and simple tool for image optimization and resizing. Install and use within minutes. Nice and simple.

Setup example

Caesium settings that were used for optimizing all images on Scrollsequence website. Quality around 70 will give you nice results while having a small file size.

2.Online Image Optimization

Imagify.io (Free and Paid)

★★★★★

Allows simple upload and image optimization with basic settings. There are limits for Free account. You get only few options (aggressive and ultra). You can optimize your images directly in WordPress, or on their website.

PROS	CONS
WordPress Integration	Limited free use, quite expensive on the long term
Very effective optimization	Not so many options

Shortpixel (Free and Paid)

★★★★★

Similar to Imagify.io. Allows simple upload and image optimization with basic settings. You can optimize your images directly in WordPress, or on their website.

Kraken.io (Free and Paid)

★★★★★

Another WordPress and online solution to speed up your page loading times.

blog

2024 Black Friday & Cyber Monday Deals

Post author By ales.kozelsky
Post date October 13, 2020

Our handpicked selection of Black Friday & Cyber Monday deals for WordPress and Saas for this year are below.

Are you running a BFCM promotion? You can submit yours or upcoming deals below.

Submit your 2024 BFCM deal

Scrollsequence

SCROLLLSEQUENCE

50% OFF ALL PLANS

This year’s Black Friday and Cyber Monday deal.

Enter coupon code on checkout: “BFCM2024“

SAVE 50%

Valid from November up to December.

RankMath

RankMath are running a 30% discount on all Rank Math products + access to $15,000 worth of partner offers.

List of Scroll Animation Examples

1. WildVikings

2. QuarkBaby

3. Framed Academy

Learn Scroll Animation with Scrollsequence WordPress Plugin Today!

4. Roxanalytics

5.Sea Drone Pro

6. DJI Drone

7. Apple Product Pages

Learn Scroll Animation with Scrollsequence WordPress Plugin Today!

Conclusion

1. Install Scrollsequence WP Plugin

2. Create Animation

3. Add Scrollsequence Image Animation To Beaver Builder

More from this series

1. Add Image sequence animation to Elementor

2. Add Image sequence animation to Divi

3. Add Image sequence animation to Beaver Builder

Conclusion

1. Install Scrollsequence WP Plugin

2. Create Animation

3. Add Scrollsequence Image Animation To Divi

More from this series

1. Add Image sequence animation to Elementor

2. Add Image sequence animation to Divi

3. Add Image sequence animation to Beaver Builder

Conclusion

1. Install Scrollsequence WP Plugin

2. Create Animation

3. Add Scrollsequence Image Animation To Elementor

More From This Series

1. Add Image sequence animation to Elementor

2. Add Image sequence animation to Divi

3. Add Image sequence animation to Beaver Builder

Conclusion

What is a 3D Model?

Making of a 3D Model

Software Options

Digital Marketing and CGI

Top 5 Ways to Increase Conversion Rates with 3D Models, CGI and Animations

1. Rendered Video Animation

2. Scroll Sequence

Interior

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

How to add Scrollsequence to your site?

Increase conversion rates with immersive digital marketing

3. Embedded 3D Models

4. Augmented Reality

5. Rendered Images

Brief history of image sequence on scroll

Sony Be Moved

Apple Airpods Pro

Samsung Galaxy S21

How to create scroll animation like Sony, Apple or Samsung?

1. Scrollsequence WordPress Plugin

2.Write your own Javascript

1. Video versus image sequence

2. Which HTML tag to use <canvas> <img > or <video>?

3. Javascript Scroll Image Animation Performance

4. Responsivity

5. SEO

6. Image pre-loading and caching

7. Cross device-compatibility

8. Fallback in case of disabled Javascript

9. Image Optimisation

1.1. Vanilla Javascript Scroll Animation

1.2. Use of Javascript Animation Libraries

GreenSock Animation Platform (GSAP)

ScrollMagic Image Sequence

JQuery Sequencer

Closing Words

Why to add Scroll Image Animation on your website?

What are you going to learn today?

Video Source(s)

Video to image conversion

File naming is important

Image optimization

Starting your first Scrollsequence

Add images

Content